how to print array in underscore.js template?

Question

I am using underscore.js's templating library, and I am not sure how to go about using a logic inside of a template. for example, I would like to print an array of tags in a template. What is the best approach for this?

Javascript:

bunny_data = {
  name: "sprinkles",
  age: 1,
  tags: ['fuzzy','wuzzy']
};

bunny_view = $("#bunny-template").html();
$(body).append(_.template(bunny_view,bunny_data));

Template:

<script type='text/template'>
  <div> 
     <h5><% = name %></h5>
     <ul class='tag-list'>
         <!-- How do I print the tags here? -->
     </ul>
  </div>
</script>

drew moore · Accepted Answer · 2014-03-21 23:57:20Z

31

You don't need to encapsulate bunny_data as @Ken suggests, you were on the right track. Whether or not you want to call _. functions or just use plain Javascript constructs is up to you, but there's no built-in flow constructs in Underscore templates, to do that you just embed code (you might want to look into eco or Mustache or something if you want that).

My example looks like this (almost the same as you own):

<script type='text/template' id="bunny-template">
  <div> 
     <h5><%= name %></h5>
     <ul>
       <% for(var tag in tags) { %>
           <li><%= tags[tag] %></li>
       <% } %>
     </ul>
  </div>
</script>

with the following Javascript:

bunny_data = {
  name: "sprinkles",
  age: 1,
  tags: ['fuzzy','wuzzy']
};

bunny_view = $("#bunny-template").html();
$(body).append(_.template(bunny_view, bunny_data));

You can verify that it runs here.

(On a personal preference note, I'm a heavy user of all of Underscore except the templates for this reason, I'm not comfortable with the amount of code you must put in them if you have a more complicated use case).

edited Mar 21, 2014 at 23:57

drew moore

32.8k17 gold badges79 silver badges113 bronze badges

answered Dec 28, 2011 at 15:15

Jacob Oscarson

6,4431 gold badge38 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Allen Over a year ago

whats the difference between <%=%> and <%%>?

Jacob Oscarson Over a year ago

<%= %> outputs the result the expression inside it's clause, <% %> simply executes the code inside it's clause (if you return in a <% %>, it will be functionally equivalent to <%= %> though). E.g: <% 'foo' %> outputs nothing, <%= 'foo' %> outputs foo.

Cantinos Over a year ago

Jacob Oscarson has the best way but this is now obsolete. the new javascript should be with the following Javascript : bunnyview = _.template($("#bunny-template").html()); $(body).append(bunnyview(bunny_data));

Ken · Accepted Answer · 2011-12-27 20:02:00Z

8

It looks like you are not setting bunny_data properly in your JavaScript.

Instead of:

$(body).append(_.template(bunny_view,bunny_data));

Try:

$(body).append(_.template(bunny_view, { bunny_data: bunny_data }));

Print the data in your template (notice I removed the space after % in <%= name %>):

<script type='text/template'>
  <div> 
    <h5><%= name %></h5>
    <ul class='tag-list'>
      <% _.each(bunny_data, function(bd) { %>
        <li><%= bd.name %></li>
        ...
      <% }); %>
    </ul>
  </div>
</script>

Hopefully that helps.

answered Dec 27, 2011 at 20:02

Ken

9,0271 gold badge23 silver badges20 bronze badges

Comments

Mushegh A. · Accepted Answer · 2012-04-22 06:31:46Z

8

Also join will do the trick, so in html you'll have

 <ul>
     <li><%= tags.join('</li><li>') %></li>
 </ul>

Check it at jsFiddle.

answered Apr 22, 2012 at 6:31

Mushegh A.

1,43112 silver badges18 bronze badges

2 Comments

Kristian Over a year ago

no offense but to interject '</li><li>' per item seems pretty hacky

Dexygen Over a year ago

Hacky but the most concise

Collectives™ on Stack Overflow

how to print array in underscore.js template?

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related