Как печатать массив в шаблоне underscore.js?

Я использую underscore.js templating library, и я не уверен, как использовать логику внутри шаблона. например, я хотел бы напечатать массив тегов в шаблоне. Каков наилучший подход для этого?

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>

Ответ 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));

Вы можете проверить, что он работает здесь.

(В личной заметке о предпочтениях я являюсь тяжелым пользователем всех Underscore, за исключением шаблонов по этой причине, мне не нравится размер кода, который вы должны вставить в них, если у вас есть более сложный случай использования).

Ответ 2

Похоже, что вы не устанавливаете bunny_data правильно в свой JavaScript.

Вместо:

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

Try:

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

Распечатайте данные в своем шаблоне (обратите внимание, что я удалил пробел после% in <%= 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>

Надеюсь, это поможет.

Ответ 3

Также join выполнит трюк, поэтому в html у вас будет

 <ul>
     <li><%= tags.join('</li><li>') %></li>
 </ul>

Посмотрите на jsFiddle.