Backbone.js渲染一个集合的视图

Question

我与Backbone /需要JS的n00b，我试图运行基于集合的视图。 我在下面的文件MVC模式 分裂代码这是我的视图代码：

文件：观点/ petDirectory

define([ 
    'jquery', 
    'backbone', 
    'models/pet', 
    'collections/pets', 
    'text!templates/pet/directory.html' 
], function($, Backbone, PetModel, PetsCollection, petDirectoryTemplate){ 

var PetDirectoryView = Backbone.View.extend({ 

    el: $("#main"), 
    template: _.template(petDirectoryTemplate), 
    collection: new PetsCollection(), 

    initialize: function() { 
     var view = this; 
     view.render(); 
    }, 

    render: function(){ 
     var view = this; 
     var compiledTemplate = this.template({pets: view.collection}); 
     view.$el.html(compiledTemplate); 
     return this; 
    }, 
}); 

return PetDirectoryView; 
}); 

数据通过API在模型中REST风格的加载，并创建在router.js中的PetDirectoryView实例。

，但我有一些错误（也许asynchronus电话），因为我的模板不显示的项目和我的浏览器控制台显示是这样的：

r {length: 0, models: Array[0], _byId: Object, constructor: function, url: "http://localhost:3000/pets"…} 

任何想法？提前致谢！

Answer 1

虽然我写这个问题，我已经得到了答案！感谢StackOverflow！ ：D

重点是在fetch（）结束回调函数之前，不要渲染视图。 代码如下：

initialize: function() { 
     var view = this; 
     view.collection = new PetsCollection(); 
     view.collection.fetch({ 
      success: function(){ 
       view.render(); 
      } 
     }); 
     console.log(view.collection); 
     view.render(); 
}, 
render: function() { ... }