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

Question

我正在使用 underscore.js 的模板库，并且我不确定如何使用 a 内部的逻辑模板。例如，我想在模板中打印一组标签。对此最好的方法是什么？

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

您不需要像 @Ken 建议的那样封装 bunny_data ，您的方向是正确的。无论您是要调用 _. 函数还是仅使用普通的 Javascript 构造都取决于您，但 Underscore 模板中没有内置的流程构造，为此您只需嵌入代码（您可能会想要研究 eco 或 Mustache< /a> 或者如果你想要的话 那）。

我的示例如下所示（与您拥有的几乎相同）：

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

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

（就个人喜好而言，我是除模板之外的所有 Underscore 的重度用户，因此，如果您有更复杂的用例，我对必须在其中放入的代码量感到不满意）。

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。