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));

您可以验证它是否运行here。

（根据个人偏好说明，我是所有下划线的重度用户，除了模板因为这个原因，如果你有一个更复杂的用例，我对你必须放入的代码量感到不舒服）。

Answer 2

您似乎没有在JavaScript中正确设置bunny_data。

而不是：

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

尝试：

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

在模板中打印数据（注意我删除了<%= 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处查看。

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

3 个答案: