Backbone.js + Handlebars ciascuno

Question

Sto provando a convertire lo RailsCast on Backbone.js di Ryan per funzionare con Handlebars e sono bloccato su un semplice problema.

Non riesco a essere in grado di scorrere attraverso un array JSON e visualizzare il risultato. Sto utilizzando queste gemme nel mio Gemfile

gem 'backbone-on-rails' 
gem 'handlebars_assets' 

Nel mio index.jst.hbs, ho il seguente:

chiamata

{{entries.length}} 

<ul> 
    {{#each entries.models}} 
     <li>{{name}}</li> 
    {{/each}} 
</ul> 

L'API sembra funzionare, come si può vedere nel conteggio 7 a lo screenshot.

Tuttavia, il contenuto di ciascun modello non viene visualizzato. Ecco la risposta (index.js.coffee) e la risposta JSON di seguito.

class Raffler.Views.EntriesIndex extends Backbone.View 
     template: JST['entries/index'] 

     initialize: -> 
     #triggered when view gets created, listen to 'reset' event, then re-@render, pass 'this' for context binding 
     @collection.on('reset', @render, this) 

     render: -> 
     $(@el).html(@template(entries: @collection)) 
     this 

JSON:

[ 
{ 
"created_at":"2012-06-28T18:54:28Z", 
"id":1, 
"name":"Matz", 
"updated_at":"2012-06-28T18:54:28Z", 
"winner":null 
}, 
{ 
"created_at":"2012-06-28T18:54:28Z", 
"id":2, 
"name":"Yehuda Katz", 
"updated_at":"2012-06-28T18:54:28Z", 
"winner":null 
}, 
{ 
"created_at":"2012-06-28T18:54:28Z", 
"id":3, 
"name":"DHH", 
"updated_at":"2012-06-28T18:54:28Z", 
"winner":null 
}, 
{ 
"created_at":"2012-06-28T18:54:28Z", 
"id":4, 
"name":"Jose Valim", 
"updated_at":"2012-06-28T18:54:28Z", 
"winner":null 
}, 
{ 
"created_at":"2012-06-28T18:54:29Z", 
"id":5, 
"name":"Dr Nic", 
"updated_at":"2012-06-28T18:54:29Z", 
"winner":null 
}, 
{ 
"created_at":"2012-06-28T18:54:29Z", 
"id":6, 
"name":"John Nunemaker", 
"updated_at":"2012-06-28T18:54:29Z", 
"winner":null 
}, 
{ 
"created_at":"2012-06-28T18:54:29Z", 
"id":7, 
"name":"Aaron Patterson", 
"updated_at":"2012-06-28T18:54:29Z", 
"winner":null 
} 
] 

Answer 1

tuo @collection è, presumibilmente, un Backbone.Collection. Handlebars lo vedrà come una matrice di qualche tipo, quindi {{entries.length}} funziona come previsto e {{#each entries.models}} itera il giusto numero di volte; tuttavia, Handlebars non ha idea di cosa fare con i Backbone.Model s che si trovano all'interno di @collection.models.

Convertire i @collection ai dati grezzi utilizzando toJSON, Manubrio sa cosa fare con semplici array e gli oggetti JavaScript:

render: -> 
    @$el.html(@template(entries: @collection.toJSON())) 
    @ 

e quindi regolare il modello di guardare solo entries piuttosto che entries.models:

<ul> 
    {{#each entries}} 
     <li>{{name}}</li> 
    {{/each}} 
</ul> 

Demo: http://jsfiddle.net/ambiguous/tKna3/

A regola generale con Backbone è di passare model.toJSON() o collection.toJSON() ai modelli in modo che non debbano sapere sui metodi Backbone (come get) e in modo che i modelli non alterino accidentalmente i modelli e le raccolte.