Backbone.js + Kierownice każdy

Question

Próbuję przekonwertować RailsCast on Backbone.js Ryana do pracy z kierownicą i utknąłem na prostym problemie.

Nie mogę wydawać się być w stanie iterować w tablicy JSON i wyświetlić wynik. Używam tych klejnotów w moim Gemfile

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

W moim index.jst.hbs, mam następujący:

{{entries.length}} 

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

API wezwanie wydaje się działać, jak widać w liczbie 7 w zrzut ekranu.

Jednak zawartość każdego modelu nie jest wyświetlana. Oto widok (index.js.coffee) i odpowiedź JSON poniżej.

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

Twój @collection jest przypuszczalnie Backbone.Collection. Kierownice zobaczą to jako pewnego rodzaju tablicę, więc {{entries.length}} działa zgodnie z oczekiwaniami, a {{#each entries.models}} iteruje odpowiednią liczbę razy; Jednakże, Handlebars nie ma pojęcia, co zrobić z Backbone.Model s, które są wewnątrz @collection.models.

Konwersja @collection do surowych danych z wykorzystaniem toJSON, Kierownice wie, co zrobić z prostych tablic i obiektów JavaScript:

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

a następnie dostosować szablon patrzeć tylko entries zamiast entries.models:

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

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

A ogólna zasada z kręgosłupem ma przekazywać model.toJSON() lub collection.toJSON() do szablonów, aby nie musiały one wiedzieć o metodach Szkieletów (takich jak get) i aby szablony nie zmieniały przypadkowo twoich modeli i kolekcji.