how to convert EJS to handlebars? - for-loop

is it possible to use both ejs and handlebars in the same project? or do i need to change the ejs to handlebars? This is a piece of the code that needs to be changed, can someone help me?
<ul>
<% for(var i=0; i < discussions.length; i++) { %>
<li><%= discussions[i].question %></li>
<% } %>
</ul>

{{#each discussion}}
<li><a href="/discussion/... </a></li>
{{/each}}

First of all, No. You can use only one view engine. If your project is on handlebars, then stick to handlebars. If it's on ejs, stick with ejs. And for the following code to be converted into handlebars, this will do:
{{#each discussion}}
<li><a href="/discussion/... </a></li>
{{/each}}

Related

Insert dynamic class assignment to a Rails link_to tag

I am trying to add a dynamic class to a link_to in Rails 7. I have the following code, but it's not inserting the appropriate content based on the request.env["PATH_INFO"]...
<ul>
<% %w[blog headlines network].each do |nav_link| %>
<%= added_class = request.env["PATH_INFO"] == nav_link ? "nav_current" : nil %>
<li class="btn"><%= link_to "#{nav_link}".capitalize, "/#{nav_link}", id: "nav_main", class: "btn btn_nav #{added_class}" %></li>
<% end %>
</ul>
However, the resulting HTML is:
<ul>
<li class="btn"><a id="nav_main" class="btn btn_nav " href="/blog">Bog</a></li>
<li class="btn"><a id="nav_main" class="btn btn_nav " href="/headlines">Headlines</a></li>
<li class="btn"><a id="nav_main" class="btn btn_nav " href="/network">Network</a></li>
</ul>
As you can see, the added_class doesn't get inserted. Any ideas?
request.env['PATH_INFO'] contains a leading / (at least on Rails 7; and IIRC on previous versions as well)
That means that if you are visiting localhost:3000/blog, request.env['PATH_INFO'] is /blog, not blog.
The following code should fix it:
<ul>
<% %w[blog headlines network].each do |nav_link| %>
<% added_class = request.env["PATH_INFO"] == "/#{nav_link}" ? "nav_current" : nil %>
<li class="btn"><%= link_to "#{nav_link}".capitalize, "/#{nav_link}", id: "nav_main", class: "btn btn_nav #{added_class}" %></li>
<% end %>
</ul>
Ok, so the following code does what I wanted it to. It injects a custom class into the link tag so that I can track the current button and style it differently... :
<ul>
<% %w[blog headlines network].each do |nav_link| %>
<% add_class = request.env['PATH_INFO'] == "/#{nav_link}" ? "nav_current" : "" %>
<li class="btn"><%= link_to "#{nav_link}".capitalize, "/#{nav_link}", id: "nav_main", class: "btn btn_nav #{add_class}" %></li>
<% end %>
</ul>
No Javascript necessary.

How to reuse a variable obtained from a loop in a subsequent loop in ejs?

I'm currently working on a menu for an hexo.io site using data from a YAML file and EJS. My point is to generate a menu with sections and subsections directly from the data included in the YAML file.
The yaml file in _data/menu.yml
sections:
Section1:
Section2:
section1:
Activate:
url: /activate
First steps:
url: /first-steps
My ejs file
<% for (var section in site.data.menu.sections) { %>
<ul>
<li>
<%= section %>
<% for (var i in site.data.menu.section) { %>
<ul>
<li><%= i %></li>
</ul>
<% } %>
</li>
</ul>
<hr>
<% } %>
My goal is to reuse the section variable in the second loop so that I can get a menu displaying :
Section1
Activate
First steps
Section2
Until now, I couldn't find how to properly insert this variable in the loop conditions. And I do not wish to hard code section names in the second loop.
Thanks for your input.
Found a way to do it unifying everything. it could still be optimised but works for me so I post it in case others have the same issue:
YAML
sections:
section1:
title: Section 1
sub:
Activate: /activate
First steps: /first-steps
section2:
title: Section 2
EJS
<% for (var i in site.data.menu.sections) { %>
<ul>
<li>
<%= site.data.menu.sections[i].title %>
<% for (var j in site.data.menu.sections[i].sub) { %>
<ul>
<li><%= j %></li>
</ul>
<% } %>
</li>
</ul>
<hr>
<% } %>

How to output array via ECO in DocPad to build for example an image gallery?

I have a document with the following frontmatter:
---
layout: default
title: "A Gallery"
image:
- "image-1.jpg"
- "image-2.jpg"
- "image-3.jpg"
---
Now I want to build a list of images in my default-template like this.
<ul>
<li><img src="image-1.jpg" alt=""></li>
<li><img src="image-2.jpg" alt=""></li>
<li><img src="image-3.jpg" alt=""></li>
</ul>
I found this tutorial for javascript loops.
But how do I convert it to ECO/Coffeescript?
Something like this?
<ul>
<% gallery i + 1, for images i in #document.image[i]: %>
<li><%- #document.image[i] %></li>
<% end %>
</ul>
This is how I did it.
In your docpad.coffee file:
site:
pics:
myFirstGallery: [
{name: '/images/mypic.png' h: '180px' w: '100px'},
{name: '/images/mypic2.png' h: '180px' w: '100px'}
]
Then in your eco file:
<ul>
<% for pic in #document.site.pics.myFirstGallery: %>
<li>
<img src="#{pic.name}" width="#{pic.w}" height="#{pic.h}" />
</li>
<% end %>
</ul>
It should be something similar to that. I use Jade so I forget the exact CoffeeScript syntax. Let me know if I got something wrong. The for in syntax comes from CoffeeScript's website. I looked it up on Eco's ReadMe file.
I figured it out after seeing this code in »The Little Book on CoffeeScript« (GitHub Version).
for name, i in ["Roger the pickpocket", "Roderick the robber"]
alert "#{i} - Release #{name}"
For the sample above (see my question) you have to write this code.
<ul>
<% for image, i in #document.image: %>
<li>
<img src="<%- "#{image}" %>" />
</li>
<% end %>
</ul>
Now it works like charm.

Creating a Blank Rails 3.1 Templating Handler

What I want to do is make it just output the view itself, and ignore what Rails would normally think is embedded Ruby within the HTML.
For example:
<div class="current">
<div class="question">
<h3 id="homework_name"><%= homework.name %><h3 id="due">Due <%= homework.due %></h3></h3>
<h2 class="title">The Question:</h2>
<p id="question_contents"class="contents"><%= current_question.contents</p>
</div>
<div class="answer">
<h2 class="title">Your Answer:</h2>
<textarea class="contents" id="student_answer"><%= current_question.answer %></textarea>
</div>
</div>
I want an ActionView Template Handler to ignore all mentions of:
<%= homework.name %>
<%= homework.due %>
<%= current_question.contents %>
<%= current_question.answer %>
More specifically, it should ignore any tags starting with <% and ending with %>
If you need more info check out http://pastie.org/private/epsxnapldho6co2y0indg
Here you go https://gist.github.com/1144297
And use .html.lifo extensions for your templates.

why is Ajax.Autocompleter setting the style for the div container for the results to display:none?

my autocomplete call is showing nothing right now, because the div that i am inserting the ul into has its style set to display:none. using firebug, i can see the results are returned in a proper unordered list tag and when i edit the html from the firebug console and remove the style="display:none;", i see the autocomplete results. i added css for the autocomplete tags that are generated but this is getting overwritten by prototype 1.6.1/scriptaculous 1.8.3. also, i'm using rails 1.2.2
here is the code from my view:
<script type="text/javascript">
new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/campaigns/title_list", {tokens: ',', paramName: 'title'});
</script>
<input type="text" id="autocomplete" name="autocomplete_parameter"/>
<div id="autocomplete_choices" class="autocomplete"></div>
and here my controller action and partial:
def title_list
camp_title = params[:title]
#titles = Campaign.find(:all, :conditions => ["title ilike ?", "%#{camp_title}%"], :select => :title).collect { |camp| camp.title }
render :partial => "title_list"
end
_title_list.rhtml
<ul>
<% #titles.each do |t| %>
<li> <%= t %> </li>
<% end %>
</ul>
here's what i seen in firebug:
<div style="display: none; position: absolute; left: 8px; top: 123px; width: 155px;" id="autocomplete_choices">
<ul>
<li class="selected"> DirecTV Defender (Best Deal Ever) </li>
<li class=""> Defender DirecTV </li><li class=""> DirecTV Defender - Collections </li>
<li class=""> Defender DirectTV (Gotham Direct) </li>
</ul>
</div>
any suggestions would be greatly appreciated.
-h
You need to go into the auto_complete helper (inside the vendor directory) and change the line items.uniq to items.uniq.join
The reason is a change in the to_s behavior of Arrays in Ruby 1.9. Worked fine for me like this.

Resources