アンダースコアテンプレートのヘルプが必要 - テンプレートコレクション

Question

テンプレート用にアンダースコアを使用しています。ここにサンプルテンプレートがあります。

<script id="discussion-template" type="text/html"> 
    [[ _.each(discussions, function(topic){ ]] 
     <li> 
      <article id="{{ topic.htmlId() }}"> 
       <a class="section-arrow mir" href="#">toggle</a> 
       <h3>{{ topic.get('text') }}</h3> 
       <ol></ol> 
      </article>   
     </li> 
    [[ }); ]] 
</script> 

backbone.jsのview.render（）内で、コレクションにテンプレートを渡しています。

this.el.append(this.template({ discussions: this.collection.models })); 

私の質問はここにありますが、ループするコードを記述する必要がありますか？コレクションを渡すだけで、コレクション内のアイテムごとに1つのアイテムをレンダリングするほどスマートではないことができますか？また、underscore.jsはネストテンプレートのために何かを提供していますか？コレクションの各アイテムには、実際にレンダリングする必要があるアイテムのコレクションがあります。このテンプレート内から別のテンプレートを呼び出すにはどうすればいいですか？すべてのリンク、ヒント、チュートリアルはもちろん大歓迎です。

ありがとうございます！

Answer 1

私はあなたがループコードを書く必要があると思うが、テンプレートではなく、ビュー内にループを持つことでそれを掃除することができます。つまり、コンテナ（<ol>を保持する）と<li>をレンダリングするためのテンプレートの1つのテンプレートがあります。

各アイテムがアイテムのコレクションである場合は、トピックアイテムテンプレートの<ol class="topic-collection-will-append-to-this">に追加するモデルと同じテクニックを使用できます。

私はので、私はそれはバグが無料ではない100％ではないんだけど、それはそれに対処する方法のあなたのアイデアを与える必要があります下のコードをテストしませんでした:)

window.TopicView = Backbone.View.extend({ 
    template: _.template($("#topic-template").html()), 
    tag: 'li', 
    className: 'topic', 

    initialize: function() { 
     _.bindAll(this, 'render'); 
    }, 

    render: function() { 
     $(this.el).html(this.template({topic: this.model})); 
     return this; 
    } 
}); 

window.DiscussionView = Backbone.View.extend({ 
    tagName: 'section', 
    className: 'discussion', 
    template: _.template($('#discussion-template').html()), 

    initialize: function() { 
     _.bindAll(this, 'render'); 
     this.collection.bind('reset', this.render); 
    }, 

    render: function() { 
     var $topics, 
     collection = this.collection; 

     $(this.el).html(this.template({})); 
     $topics = this.$(".topics"); 
     this.collection.each(function(topic) { 
      var view = new TopicView({ 
       model: topic 
      }); 
      $topics.append(view.render().el); 
     }); 

     return this; 
    } 
}); 

<script id="topic-template" type="text/html"> 
    <article id="{{ topic.htmlId() }}"> 
     <a class="section-arrow mir" href="#">toggle</a> 
     <h3>{{ topic.get('text') }}</h3> 
     <ol class="topic-collection-will-append-to-this"> 
     </ol> 
    </article>   
</script> 

<script type="text/template" id="discussion-template"> 
    ... 
    <ol class="topics"> 
    </ol> 
</script> 

Answer 2

あなたは、2つのテンプレートを持つことができます1つはリスト用で、もう1つは内部要素用です。そして、リストテンプレートにちょうど内側の1の結果を印刷：http://jsfiddle.net/dira/hRe77/8/

アンダーのテンプレートは非常に非常に簡単で、付属の任意のスマートな行動/魔法を持っていないされていますhttp://documentcloud.github.com/underscore/docs/underscore.html#section-120

Answer 3

何を探していることですより能力の高いテンプレートシステム。アンダースコアのテンプレートは非常に最小限で、ループなどの組み込みサポートはありません。メイビーMustacheテンプレートはあなたのためです（Sidenote：これはいくつかの奇妙な理由でロジックレスと呼ばれていますが、再帰とラムダのサポートの両方で、少なくともSchemeの途中にいると言いますが）..