在车把模板中渲染集合数据答案

【问题标题】：Issue rendering collection data in handlebars template在车把模板中渲染集合数据
【发布时间】：2014-02-08 09:06:11
【问题描述】：

我想在车把预编译模板中呈现集合， this.courses.fetch() 正在工作车把视图正在正确呈现...（只有每个循环不呈现集合数据）

这是我的代码...

路由器.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>

这是我对骨干项目的第一次尝试，也请提出好的做法

【问题讨论】：

标签： javascript backbone.js handlebars.js

【解决方案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>

【讨论】：