Backbone.js + हैंडलबार प्रत्येक

Question

मैं हैंडलबार्स के साथ काम करने के लिए रयान के RailsCast on Backbone.js को बदलने की कोशिश कर रहा हूं और एक साधारण समस्या पर फंस गया हूं।

मैं एक JSON सरणी के माध्यम से पुन: प्रयास करने और परिणाम प्रदर्शित करने में सक्षम नहीं प्रतीत होता। मैं अपने Gemfile में इन रत्नों का उपयोग कर रहा

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

मेरी index.jst.hbs में, मैं निम्नलिखित है:

{{entries.length}} 

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

API कॉल, काम करने के रूप में आप में 7 की गिनती में देख सकते हैं लगता है स्क्रीनशॉट।

हालांकि, प्रत्येक मॉडल की सामग्री प्रदर्शित नहीं की जा रही है। यहां देखें (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 के अंदर हैं।

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

और फिर बजाय entries.models सिर्फ entries को देखने के लिए अपने टेम्पलेट समायोजित:

@collection के लिए कच्चे toJSON का उपयोग कर डेटा कन्वर्ट, हैंडल क्या सरल जावास्क्रिप्ट सरणियों और वस्तुओं के साथ क्या करना जानता है

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

डेमो: http://jsfiddle.net/ambiguous/tKna3/

ए बैकबोन के साथ सामान्य नियम model.toJSON() याको अपने टेम्पलेट्स पर पास करना है ताकि उन्हें बैकबोन विधियों (जैसे get) के बारे में पता न हो और ताकि आपके टेम्पलेट गलती से आपके मॉडल और संग्रह को परिवर्तित न करें।