主干.js 视图中的每个集合

Question

如果我在视图中循环集合，它似乎是空的，警报对话框不会出现。当我在这个视图中使用 console.log(this.collection) 时，它看起来没问题（这个集合中有 16 个元素）。

我的路由器：（集合 url：'/api/employees'，这是一个 rails json 输出）

Office.Routers.Employees = Backbone.Router.extend({

  routes: {
    "":   "index"
  },


  initialize: function() {
    this.collection = new Office.Collections.Employees();
    this.collection.fetch();
  },

  index: function() {
    var view = new Office.Views.EmployeesIndex({ collection: this.collection });
    view.render();
  }

});

和我的 index.js 视图：

Office.Views.EmployeesIndex = Backbone.View.extend({

  render: function() {
    this.collection.each( function( obj ){ alert(obj); } );
  }

});

编辑：

这是 console.log(this.collection) 在视图中的输出：http://i.stack.imgur.com/ZQBUD.png

编辑2：

我认为 Rails 是有罪的。当我使用静态集合时，一切正常

var collection = new Backbone.Collection([
  {name: "Tim", age: 5},
  {name: "Ida", age: 26},
  {name: "Rob", age: 55}
]);

Answer 1

collection.fetch() 向服务器发出异步请求。索引回调不等待获取返回。所以你的渲染函数正在渲染一个空集合。

需要使用fetch方法的成功回调：

index: function() {
  this.collection.fetch({
    success: function(data) {
      var view = new Office.Views.EmployeesIndex({ collection: data });
      view.render();        
    }        
  });
}

请注意，Backbone 文档建议 bootstrapping 通过将数据包含在文档本身中来提供您需要的任何初始数据：

当您的应用首次加载时，通常会有一组初始模型 你知道你需要，为了呈现页面。 与其触发额外的 AJAX 请求来获取它们，不如使用更好的模式 是让他们的数据已经引导到页面中。

Answer 2

在您的视图呈现时，获取可能尚未完成。请尝试以下操作：

  index: function() {
    var p, collection, view;
    collection = new Office.Collections.Employees();
    p = collection.fetch();
    view = new Office.Views.EmployeesIndex({ collection: collection });
    p.done(view.render);
  }