Backbone.js + Tay lái mỗi

Question

Tôi đang cố chuyển đổi số RailsCast on Backbone.js của Ryan để làm việc với Handlebars và bị kẹt trên một vấn đề đơn giản.

Tôi dường như không thể lặp qua một mảng JSON và hiển thị kết quả. Tôi đang sử dụng những viên ngọc trong Gemfile tôi

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

Trong index.jst.hbs của tôi, tôi đã điều sau đây:

gọi

{{entries.length}} 

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

API dường như được làm việc, như bạn có thể thấy trong số 7 ở ảnh chụp màn hình.

Tuy nhiên, nội dung của từng mô hình không được hiển thị. Đây là phản hồi View (index.js.coffee) và JSON bên dưới.

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 của bạn là, có lẽ, một Backbone.Collection. Tay lái sẽ thấy nó như là một mảng của một số loại như vậy {{entries.length}} hoạt động như mong đợi và {{#each entries.models}} lặp lại đúng số lần; tuy nhiên, Handlebars không biết phải làm gì với các số Backbone.Model nằm bên trong @collection.models.

Chuyển đổi @collection để dữ liệu thô sử dụng toJSON, tay lái biết phải làm gì với mảng JavaScript đơn giản và các đối tượng:

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

Và sau đó điều chỉnh mẫu của bạn để nhìn vào chỉ entries hơn entries.models:

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

Bản trình diễn: http://jsfiddle.net/ambiguous/tKna3/

A quy tắc chung với Backbone là vượt qua model.toJSON() hoặc collection.toJSON() vào các mẫu của bạn để chúng không phải biết về các phương thức Backbone (chẳng hạn như get) và do đó các mẫu của bạn không vô tình thay đổi mô hình và bộ sưu tập của bạn.