Underscore.js цикл шаблона от объекта итерации

Question

У меня есть следующий шаблон для модальных

<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) в <% = модальный ['кнопки'] [0] ['extra_class']%>. Я предполагаю, что это простой вопрос, но, к сожалению, я мог найти все, что мог бы применить в моем случае.

Любая помощь будет принята с благодарностью!

Спасибо!

Answer 1

Материал внутри <% ... %> в шаблоне подчёркивания - это просто 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> 
<% } %>