Problema Renderice la colección de la red troncal usando la plantilla de bigote

Question

Soy bastante nuevo en la red troncal js y el bigote. Estoy intentando cargar la colección principal (matriz de objetos) en la carga de la página desde el objeto rails json para guardar la llamada adicional. Estoy teniendo problemas para renderizar la colección de la red troncal usando una plantilla de bigote.

Mi colección modelo & son

var Item = Backbone.Model.extend({ 

}); 

App.Collections.Items= Backbone.Collection.extend({ 
    model: Item, 
    url: '/items' 
}); 

y vista

App.Views.Index = Backbone.View.extend({ 
    el : '#itemList', 
    initialize: function() { 
     this.render(); 
    }, 

    render: function() { 
     $(this.el).html(Mustache.to_html(JST.item_template(),this.collection)); 
     //var test = {name:"test",price:100}; 
     //$(this.el).html(Mustache.to_html(JST.item_template(),test)); 
    } 
}); 

En la vista por encima de render, puedo capaz de hacer que el modelo único (comentado obeject prueba), pero no las colecciones. Estoy totalmente impresionado aquí, lo he intentado con los dos subrayados plantillas de bigote &, pero no tuve suerte.

Y esta es la plantilla

<li> 
<div> 
    <div style="float: left; width: 70px"> 
    <a href="#"> 
     <img class="thumbnail" src="http://placehold.it/60x60" alt=""> 
    </a> 
    </div> 
    <div style="float: right; width: 292px"> 
    <h4> {{name}} <span class="price">Rs {{price}}</span></h4> 
    </div> 
    </div> 
</li> 

y mi tabla de objeto parece un poco a este

Answer 1

Finalmente resulta que el bigote no maneja matriz de objetos enviados a la plantilla, así que tuve que envolverlo con otro objeto como este

render: function() { 
    var item_wrapper = { 
      items : this.collection 
    } 

    $(this.el).html(Mustache.to_html(JST.item_template(),item_wrapper)); 

} 

y en la plantilla solo bucle la matriz elementos para hacer que el html

{{#items}} 
<li> 
<div> 
    <div style="float: left; width: 70px"> 
    <a href="#"> 
     <img class="thumbnail" src="http://placehold.it/60x60" alt=""> 
    </a> 
    </div> 
    <div style="float: right; width: 292px"> 
    <h4> {{name}} <span class="price">Rs {{price}}</span></h4> 
    </div> 
    </div> 
</li> 
{{/items}} 

espero que ayude a alguien.

Answer 2

Esto sucede porque bigote espera que un par de clave/valor sea el valor de una matriz para listas no vacías. De los mustache man page, sección "Listas no vacío":

Template: 

{{#repo}} 
    <b>{{name}}</b> 
{{/repo}} 

Hash: 

{ 
    "repo": [ 
    { "name": "resque" }, 
    { "name": "hub" }, 
    { "name": "rip" }, 
    ] 
} 

Output: 

<b>resque</b> 
<b>hub</b> 
<b>rip</b> 

Si pasa solamente una matriz, el bigote no tiene una forma de saber dónde expandirlo dentro de la plantilla.

Answer 3

bigote puede manejar matrices usando {{#.}}{{.}}{{/.}}

Answer 4

Usando Hogan.js aplicación.

Dado plantilla:

<ul> 
{{#produce}} 
    <li>{{.}}</li> 
{{/produce}} 
</ul> 

y contexto:

var context = { produce: [ 'Apple', 'Banana', 'Orange' ]); 

Obtenemos:

<ul> 
    <li>Apple</li> 
    <li>Banana</li> 
    <li>Orange</li> 
</ul>