web-dev-qa-db-ja.com

underscore.jsテンプレートで配列を印刷する方法は？

nderscore.js のテンプレートライブラリを使用していますが、テンプレート内でロジックを使用する方法がわかりません。たとえば、テンプレートにタグの配列を印刷したいと思います。これに対する最善のアプローチは何ですか？

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>
underscore.js
16
GSto

@Kenが示唆するように、bunny_dataをカプセル化する必要はありません、あなたは正しい方向に進んでいました。 _.関数を呼び出すか、単純なJavascript構造を使用するかはあなた次第ですが、アンダースコアテンプレートには組み込みのフロー構造がないため、コードを埋め込むだけです（調べてみてください）。 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));

実行されていることを確認できます ここ 。

（個人的な好みとして、私はこの理由からテンプレートを除くすべてのアンダースコアのヘビーユーザーです。より複雑なユースケースがある場合にテンプレートに入力する必要のあるコードの量に満足していません）。

31
Jacob Oscarson

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>

うまくいけば、それが役立つでしょう。

8
Ken

また、joinでうまくいくので、htmlでは次のようになります。

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

jsFiddle で確認してください。

8
Mushex Antaranian