如何在underscore.js模板中打印数组？

Question

我正在使用underscore.js的模板库,我不知道如何在模板中使用逻辑.例如,我想在模板中打印一组标签.对此最好的方法是什么？

使用Javascript:

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

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

模板:

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

Answer 1

您不需要封装,bunny_data因为@Ken建议您走在正确的轨道上.是否要调用_.函数或只是使用普通的Javascript构造取决于你,但是在Underscore模板中没有内置的流构造,为此你只需嵌入代码(你可能想要查看eco或Mustache等等)如果你想要的话).

我的例子看起来像这样(几乎和你拥有的一样):

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

使用以下Javascript:

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

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

您可以验证它是否在此处运行.

(根据个人偏好说明,我是所有下划线的重度用户,除了模板因为这个原因,如果你有一个更复杂的用例,我不满意你必须放入的代码量).

Answer 2

看起来您没有bunny_data在JavaScript中正确设置.

代替:

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

尝试:

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

打印模板中的数据(注意我在%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>

希望这会有所帮助.

Answer 3

也join将这样的伎俩,所以在HTML你必须

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

在jsFiddle检查它.