7

Backbone.js の Ryan の RailsCastを Handlebars で動作するように変換しようとしていますが、単純な問題で立ち往生しています。

JSON配列を繰り返し処理して結果を表示できないようです。Gemfile でこれらの gem を使用しています

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

私index.jst.hbsの には、次のものがあります。

{{entries.length}}

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

スクリーンショットのカウントが 7 であることからわかるように、API 呼び出しは機能しているようです。 ここに画像の説明を入力

ただし、各モデルのコンテンツは表示されていません。ビュー (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
}
]
4

1 に答える 1

11

あなた@collectionは、おそらく、Backbone.Collection. ハンドルバーはそれをある種の配列と見なすため{{entries.length}}、期待どおりに機能し{{#each entries.models}}、適切な回数反復します。Backbone.Modelただし、Handlebars は、内部にある s をどうするかわかりません@collection.models。

@collectionを使用して生データに変換しtoJSONます。Handlebars は、単純な JavaScript 配列とオブジェクトの処理方法を認識しています。

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

次に、テンプレートを調整して、次のように表示するのでentriesはなく、entries.models次のようにします。

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

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

model.toJSON()Backbone の一般的な規則は、テンプレートにorを渡すcollection.toJSON()ことです。これにより、テンプレートが Backbone メソッド ( などget) について知る必要がなくなり、テンプレートが誤ってモデルやコレクションを変更することがなくなります。

于 2012-06-28T20:47:09.817 に答える