骨幹抓取頁面加載收集

Question

我知道，骨幹醫生說取不應該被用來填充在頁面加載集合，和我種找出原因：其實

var appCollection = Backbone.Collection.extend({ 
    model:appModel, 
    url:'api/app', 
    initialize:function(){ 
     this.fetch(); 
    }, 

}); 

var homeView = Backbone.View.extend({ 
    el:'#content', 
    initialize:function(){ 
     this.collection = new appCollection(appModel) 
     this.render() 

    }, 
    render: function() { 
     var that = this; 
     alert(1); 
     _.each(this.collection.models, function (item) { 
      that.renderApp(item); 
     }, this); 


    }, 

    renderApp: function (item) { 
     var appview = new appView({ 
      model: item 
     }); 

     this.$el.append(appview.render().el); 
    } 
}) 
var home = new homeView(); 

的homeview.render功能在獲取集合之前調用，所以當我刪除alert（1）;我的應用程序不會呈現，我得到一些錯誤說「appname」（模板）是未定義的。

任何想法如何做到這一點？

獲取方法非常方便，我不介意等待幾秒鐘，實際上我打算顯示一個進度條，指示頁面正在初始化，因爲我有很多其他的東西要下載，所以有可能使用提取，當實際獲取集合時，代碼繼續運行？

Answer 1

讓我們藉此從開始：

var appCollection = Backbone.Collection.extend({ 
    model:appModel, 
    url:'api/app', 
    initialize:function(){ 
     this.fetch(); 
    }, 

}); 

我會避免內部initialize獲取。創建一個appCollection的實例不應該需要抓取。因此，使用：

var appCollection = Backbone.Collection.extend({ 
    model:appModel, 
    url:'api/app',  
}); 

然後，

var homeView = Backbone.View.extend({ 
    el:'#content', 
    initialize:function(){ 
     this.collection = new appCollection(appModel) 
     this.render() 

    }, 
    render: function() { 
     var that = this, p; 
     console.log('fetching...'); 
     p = this.collection.fetch(); 
     p.done(function() { 
      console.log('fetched!'); 
      _.each(that.collection.models, function (item) { 
       that.renderApp(item); 
      }, that); 
     }); 
    }, 

    renderApp: function (item) { 
     var appview = new appView({ 
      model: item 
     }); 

     this.$el.append(appview.render().el); 
    } 
}) 
var home = new homeView(); 

這使您可以使您的homeView當收集已被提取，這將使得它的車型。如果你不明白p.done是做什麼的，看看jQuery's Deferred。簡而言之，ajax請求返回一個承諾。當承諾滿足時（即您的收集被提取），延期的火災以及您在.done()中指定的任何功能都將執行。 請使用我在console.log提供的進度反饋。