Question

我想在手柄预渲染模板中渲染集合， 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>

这是我对骨干项目的第一次尝试，也建议好的做法

Answer 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>

在手柄模板中发出渲染集合数据

1 个答案: