2014-09-02 130 views
0

我有一个模式下面的模板Underscore.js模板循环迭代

<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'} 
    ] 
    } 
} 

我想实现的是一个iteretaion,其中我对中的索引(0)进行了“硬编码”%=模态['按钮'] [0] ['extra_class']%>。我认为这是一个简单的问题,但不幸的是,我可以找到任何可以应用于我的案例。

任何帮助将不胜感激!

谢谢!

回答

7

在Underscore模板中的<% ... %>里面的东西就是JavaScript。这意味着,你可以数组遍历你会在其他地方以同样的方式:for -loops,_.eachforEach,...

典型下划线上下的办法是:

​​

你也可以使用简单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> 
<% } %> 
+0

谢谢你的帮助!这正是我需要的! :) – 2014-09-03 05:44:44