Question

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

我的路由器:(收集网址：'/ 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

EDIT2：

我的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

在您的视图呈现时，fetch可能尚未完成。请尝试以下方法：

  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);
  }

backbone.js每个集合在视图中

2 个答案: