Subrayar plantilla de ayuda necesaria: creación de plantillas

Question

Estoy utilizando underscore.js para crear plantillas. Aquí hay una plantilla de muestra.

<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 a backbone.js view.render() Paso una colección a la plantilla.

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

Mi pregunta aquí es, ¿tengo que escribir el código de bucle? ¿No puedo simplemente pasar una colección y subrayar ser lo suficientemente inteligente como para representar un elemento por artículo en la colección? ¿También underscore.js proporciona algo para las plantillas de anidamiento? Cada elemento de la colección en realidad tiene una colección de elementos que tendré que presentar también. ¿Cómo puedo llamar a otra plantilla desde esta plantilla? Cualquier enlace, sugerencia y/o tutorial son, por supuesto, muy apreciados.

Gracias!

Answer 1

Creo que tiene que escribir el código de bucle, pero puede limpiarlo teniendo el bucle en la vista en lugar de la plantilla. Por lo tanto, tendría una plantilla para el contenedor (que contiene el <ol>) y otra para el procesamiento de <li> s.

Para que cada elemento sea una colección de elementos, puede utilizar la misma técnica, con los modelos que se agregan al <ol class="topic-collection-will-append-to-this"> en la plantilla del elemento del tema.

No he probado el código de abajo así que no estoy 100% no está libre de errores, pero hay que darle idea de una forma de hacer frente a ella :)

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

Puede tener dos plantillas , uno para la lista y uno para los elementos internos. Y en la plantilla de lista sólo imprimir el resultado de la interna: http://jsfiddle.net/dira/hRe77/8/

plantillas de subrayado es muy muy simple y no tienen ningún comportamiento/magia inteligentes conectado: http://documentcloud.github.com/underscore/docs/underscore.html#section-120

Answer 3

Lo que estás buscando es un sistema de plantillas más competente. Las plantillas de Underscore son muy mínimas, sin soporte incorporado para bucles y cosas por el estilo. Maybee Mustache plantillas es más para ti? (Sidenote: se llama lógica-menos por alguna extraña razón. Con recurrencia y soporte lambda diría que estás al menos a mitad de camino de Scheme, pero estoy divagando ...)