2014-02-08 35 views
1

我想渲染收集車把預編譯模板, this.courses.fetch()正在 車把的觀點是正確的渲染......(僅在每個循環不渲染收集數據)問題渲染收集數據

這裏是我的代碼...

router.js

App.Router = Backbone.Router.extend({ 
routes: { 
    'master/courses' : 'courses' 
}, 
initialize: function(){ 
    this.courses = new App.Collections.Courses(); 
    this.list = new App.Views.List({collection: this.courses}); 
}, 
courses: function() { 
    $('#page').html(this.list.render().el); 
} 
}); 

var app = new App.Router(); 

Backbone.history.start(); 

courses.js

App.Collections.Courses = Backbone.Collection.extend({ 
model: App.Models.Course, 
url: '/api/courses' 
}); 

list.js

p.Views.List = Backbone.View.extend({ 
initialize: function() { 
    this.listenTo(this.collection, 'reset', this.render); 
}, 
render:function(){ 
    this.$el.html(Handlebars.templates.list(this.collection)); 
    return this; 
} 
}); 

list.handlebars

<h1>Courses</h1> 

<table class="table"> 
<thead> 
    <tr> 
     <th>ID</th> 
     <th>Name</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     {{#each models}} 
     <td>{{attributes.id}}</td> 
     <td>{{attributes.name}}</td> 
     {{/each}} 
    </tr> 
</tbody> 
</table> 

這是我在骨幹工程的第一次嘗試好心建議很好的做法也

回答

1

我沒有看到這裏的地步集合獲取被解僱。您的courses中的第一行可能應該是this.collection.fetch({ reset: true });

正如我在提供的HTML結構中看到的,each應該是tr之前的標記。像這樣:

<h1>Courses</h1> 
<table class="table"> 
    <thead> 
    <tr> 
    <th>ID</th> 
    <th>Name</th> 
    </tr> 
    </thead> 
    <tbody> 
    {{#each models}} 
    <tr> 
     <td>{{attributes.id}}</td> 
     <td>{{attributes.name}}</td> 
    </tr> 
    {{/each}} 
    </tbody> 
</table>