Backbone.js + Handlebars each

Question

RyanのRailsCast on Backbone.jsをHandlebarsと連携させて変換しようとしていますが、単純な問題に固執しています。

JSON配列を反復処理して結果を表示できないようです。私は、私は私のindex.jst.hbsで

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

次いる

私のGemfileにこれらの宝石を使用しています：

{{entries.length}} 

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

API呼び出しを使用すると、7の数の中で見ることができるように、動作しているようですスクリーンショット。

ただし、各モデルのコンテンツは表示されません。以下はView（index.js.coffee）とJSONレスポンスです。

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

あなた@collectionは、おそらく、Backbone.Collectionです。ハンドルバーはそれを何らかの並べ替えの配列として見るので、{{entries.length}}は期待どおりに動作し、{{#each entries.models}}は適切な回数繰り返します。しかし、ハンドルバーは、@collection.modelsの中にあるBackbone.Modelで何をすべきか分かりません。

@collectionがtoJSONを使用して生データに変換し、ハンドルバーは、単純なJavaScriptの配列やオブジェクトをどうするかを知っている：そして

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

そして、ちょうどentriesむしろentries.modelsよりを見て、あなたのテンプレートを調整します

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

デモ：http://jsfiddle.net/ambiguous/tKna3/

Aバックボーンの一般的なルールはmodel.toJSON()またはcollection.toJSON()をテンプレートに渡して、バックボーンの方法（getなど）を知らなくてもよく、テンプレートが誤ってモデルやコレクションを変更しないようにすることができます。