Problema Rendering raccolta backbone utilizzando il modello Moustache

Question

Sono abbastanza nuovo per backbone js e Moustache. Sto cercando di caricare la collezione backbone (array Object) al caricamento della pagina da rotaie json object per salvare la chiamata extra. Sto avendo problemi nel rendering della collezione backbone usando il modello dei baffi.

mia collezione modello & sono

var Item = Backbone.Model.extend({ 

}); 

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

e 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)); 
    } 
}); 

Nella vista sopra il rendering, posso in grado di rendere il modello singolo (commentato obeject test), ma non le collezioni. Sono totalmente colpito qui, ho provato con entrambi i modelli di underscore & baffi ma senza fortuna.

E questo è il modello di

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

e la mia matrice di oggetti di tipo simile a questo

Answer 1

Infine si scopre che i baffi non gestisce array di oggetti inviati al modello, quindi ho dovuto avvolgerlo con altri oggetti come questo

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

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

} 

e nel modello solo in loop l'array elementi per rendere il codice 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}} 

speriamo vi sia utile a qualcuno.

Answer 2

Questo accade perché il baffo si aspetta una coppia chiave/valore, che utilizza il valore di un array, per elenchi non vuoti. Dalle mustache man page, sezione "Elenchi non vuoto":

Template: 

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

Hash: 

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

Output: 

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

Se si passa solo un array, i baffi non hai modo di sapere dove espanderla all'interno del template.

Answer 3

baffi supporta array utilizzando {{#.}}{{.}}{{/.}}

Answer 4

Uso Hogan.js attuazione.

Dato modello:

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

e contesto:

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

Otteniamo:

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