来自对象迭代的 Underscore.js 模板循环答案

【问题标题】：Underscore.js template loop from object iteration来自对象迭代的 Underscore.js 模板循环
【发布时间】：2014-09-02 19:29:54
【问题描述】：

我有以下模态模板

<div class="ui-modal">
  <div class="mask"></div> 
  <div class="ui-modal-container">
    <div class="ui-modal-header">
      <h3><%= modal['title'] %></h3>
    </div>
    <div class="ui-modal-text">
      <p><%= modal['description'] %></p>
    </div>
    <% if ( modal['buttons'] !== 'undefined' ) { %>
      <div class="ui-button-container">
        <a class="ui-button ui-button-pill <%= modal['buttons'][0]['extra_class'] %> " href="<%= modal['buttons'][0]['href'] %>">
          <span class="label">
            <span class="section"><%= modal['buttons'][0]['label'] %></span> 
          </span>
        </a>
      </div>
    <% } %>
  </div>
</div>

这是我要填充的数据：

_data = {
 "modal" : {
    "title" : "Your address is:",
    "description" : "Some desc here",
    "buttons" : [
       {'extra_class': 'small left', 'href' : '#register/3', 'label' : 'Back'},
       {'extra_class': 'small center', 'href' : '#register/4',  'label' : 'Next'},
       {'extra_class': 'small right', 'href' : '#', 'label' : 'Reset'}
     ]
   }
 }

我想要实现的是一个迭代，我在中“硬编码”了索引 (0)。我认为这是一个简单的问题，但不幸的是，我可以找到任何适用于我的案例的内容。

任何帮助将不胜感激！

谢谢！

【问题讨论】：

标签： jquery templates underscore.js underscore.js-templating

【解决方案1】：

Underscore 模板中 <% ... %> 中的内容就是 JavaScript。这意味着您可以像在其他任何地方一样迭代数组：for-loops、_.each、forEach、...

典型的下划线方式是：

<% if(modal['buttons']) { %>
  <div class="ui-button-container">
    <% _(model['buttons']).each(function(button) { %>
      <a class="ui-button ui-button-pill <%= button.extra_class %> " href="<%= button.href %>">
        <span class="label">
          <span class="section"><%= button.label %></span> 
        </span>
      </a>
    <% }) %>
  </div>
<% } %>

您也可以使用简单的for-loop：

<% if(modal['buttons']) { %>
  <div class="ui-button-container">
    <% for(var i = 0; i < model.buttons.length; ++i) { %>
      <a class="ui-button ui-button-pill <%= model.buttons[i].extra_class %> " href="<%= model.buttons[i].href %>">
        <span class="label">
          <span class="section"><%= model.buttons[i].label %></span> 
        </span>
      </a>
    <% } %>
  </div>
<% } %>

【讨论】：

感谢您的帮助！这正是我所需要的！ :)