下劃線模板幫助需要 - 模板集合

Question

我正在使用underscore.js進行模板。這是一個示例模板。

<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> 

inside backbone.js view.render（）我將一個集合傳遞給模板。

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

我在這裏的問題是，我必須寫循環碼嗎？我不能只傳入一個集合，並且下劃線要足夠聰明，以便爲集合中的每個項目渲染一個項目？ underscore.js還提供了一些嵌套模板？集合中的每個項目實際上都有一些我需要呈現的項目集合。我怎樣才能從這個模板中調用另一個模板。任何鏈接，提示和/或教程當然非常讚賞。

謝謝！

Answer 1

我想你必須編寫循環的代碼，但你可以通過在視圖，而不是模板中的循環清理。所以，你必須對容器進行渲染<li>■一個模板（即持有<ol>）和其他。

對於每一個項目是項目，你可以使用相同的技術，這些車型追加到<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

您可以有兩個模板，一個用於列表，另一個用於內部元素。而在列表模板只打印內一個結果：http://jsfiddle.net/dira/hRe77/8/

下劃線的模板是非常非常簡單的，不附加任何智能行爲/魔法：http://documentcloud.github.com/underscore/docs/underscore.html#section-120

Answer 3

什麼你要找的是更有效的模板系統。 Underscore的模板非常小，沒有內置的循環等支持。 Maybee Mustache模板更適合你嗎？ （旁註：因爲一些奇怪的原因，它被稱爲邏輯沒有遞歸和lambda支持，我會說你至少是Scheme的一半，但我離題了..）