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() { ... }