Backbone.js + Manillar cada

Question

Estoy tratando de convertir el RailsCast on Backbone.js de Ryan para trabajar con manubrio y estoy atascado en un problema simple.

Parece que no puedo iterar a través de una matriz JSON y mostrar el resultado. Estoy usando estas joyas en mi Gemfile

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

En mi index.jst.hbs, Tengo el siguiente:

llamada

{{entries.length}} 

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

La API parece estar funcionando, como se puede ver en el recuento de 7 en la captura de pantalla.

Sin embargo, el contenido de cada modelo no se muestra. Aquí está la Vista (index.js.coffee) y la respuesta JSON a continuación.

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

Su @collection es, presumiblemente, un Backbone.Collection. Los manubrios lo verán como una matriz de algún tipo para que {{entries.length}} funcione como se espera y {{#each entries.models}} repite la cantidad de veces correcta; sin embargo, Handlebars no tiene idea de qué hacer con el Backbone.Model que se encuentra dentro de @collection.models.

Convertir los @collection a los datos brutos, utilizando toJSON, manillares sabe qué hacer con simples arrays y objetos JavaScript:

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

y luego ajustar su plantilla para mirar simplemente entries en lugar de entries.models:

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

Demostración: http://jsfiddle.net/ambiguous/tKna3/

A regla general con Backbone es pasar model.toJSON() o collection.toJSON() a sus plantillas para que no tengan que conocer los métodos Backbone (como get) y para que sus plantillas no alteren accidentalmente sus modelos y colecciones.