Underscore templating help needed - templating collections

Question

Sto usando underscore.js per il template. Ecco un modello di esempio.

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

All'interno di un backbone.js view.render() Sto passando una raccolta al modello.

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

La mia domanda qui è, devo scrivere il codice di loop? Non posso semplicemente passare in una raccolta e sottolineatura essere abbastanza intelligente da rendere un oggetto per oggetto nella collezione? Underscore.js fornisce anche qualcosa per i modelli di nidificazione? Ogni oggetto della collezione ha in realtà una collezione di oggetti che ho bisogno di renderizzare. Come posso chiamare un altro modello all'interno di questo modello. Tutti i link, i suggerimenti e/o le esercitazioni sono ovviamente molto apprezzati.

Grazie!

Answer 1

Penso che si debba scrivere il codice di loop, ma è possibile ripulirlo avendo il loop nella vista piuttosto che il modello. Quindi avresti un modello per il contenitore (che contiene lo <ol>) e un altro per il rendering di <li> s.

Poiché ciascun articolo è una raccolta di elementi è possibile utilizzare la stessa tecnica, con i modelli che si aggiungono allo <ol class="topic-collection-will-append-to-this"> nel modello di oggetto dell'argomento.

non ho la prova il codice qui sotto, quindi non sono al 100% non è privo di bug, ma dovrebbe darvi un'idea di un modo per affrontare il problema :)

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

È possibile avere due modelli , uno per la lista e uno per gli elementi interni. E nel modello di elenco basta stampare il risultato di quella interna: http://jsfiddle.net/dira/hRe77/8/

modelli di sottolineatura sono molto molto semplice e non hanno alcun intelligente comportamento/magic allegato: http://documentcloud.github.com/underscore/docs/underscore.html#section-120

Answer 3

Quello che stai cercando è un sistema di tempistiche più competente. Il template di Underscore è molto minimale, senza il supporto integrato per il looping e così via. I modelli Maybee Mustache sono più adatti a te? (Sidenote: si chiama logic-less per qualche strana ragione. Con ricorsione e supporto lambda direi che sei almeno a metà strada per Scheme, ma divago ..)