使用Backbone.js的範圍錯誤？

Question

我相信我的問題與範圍有關，因爲我是一個js新手。我有一個很小的backbone.js例子，我試圖做的是打印出從服務器獲取的項目列表。

$(function(){ 
    // = Models = 
    // Video 
    window.Video = Backbone.Model.extend({ 
     defaults: function() { 
      return { 
       title: 'No title', 
       description: 'No description' 
      }; 
     }, 
     urlRoot: 'api/v1/video/' 
    }); 

    // VideoList Collection 
    // To be extended for Asset Manager and Search later... 
    window.VideoList = Backbone.Collection.extend({ 
     model: Video, 
     url: 'api/v1/video/' 
    }); 

    // = Views = 
    window.VideoListView = Backbone.View.extend({ 
     tagName: 'ul', 

     render: function(eventName) { 
      $(this.el).html(""); 
      _.each(this.model.models, function(video) { 
       $(this.el).append(new VideoListRowView({model:video}).render().el); 
       }, this); 
      return this; 
     } 
    }); 

    // VideoRow 
    window.VideoListRowView = Backbone.View.extend({ 
     tagName: "li", 

     template: _.template("id: <%= id %>; title: <%= title %>"), 

     className: "asset-video-row", 

     render: function() { 
      $(this.el).html(this.template(this.model.toJSON())); 
      return this; 
     } 
    }); 

    // Router 
    var AppRouter = Backbone.Router.extend({ 

     routes:{ 
      "":"assetManager" 
     }, 

     assetManager:function() { 
      this.assetList = new VideoList(); 
      this.assetListView = new VideoListView({model:this.assetList}); 
      this.assetList.fetch(); 
      $('#content').html(this.assetListView.render().el); 
     } 
    }); 

    var app = new AppRouter(); 
    Backbone.history.start(); 

    // The following works fine: 
    window.mylist = new VideoList(); 
    window.mylistview = new VideoListView({model:window.mylist}); 
}); 

如果我從控制檯訪問mylist.fetch(); mylist.toJSON()，mylist填充正常。我可以看到this.assetList.fetch()準確地從後端獲取數據，但它似乎並沒有將對象添加到this.assetList。

Answer 1

的fetch method對骨幹的集合是異步的：

取模型的默認設置爲這個集合從服務器，當他們到達重新集合。 [...]代表Backbone.sync在封面下，用於定製持久性策略。

而且Backbone.sync說：

Backbone.sync是函數調用骨幹每次嘗試讀取或模型保存到服務器的時間。默認情況下，它使用(jQuery/Zepto).ajax來創建RESTful JSON請求。

所以fetch涉及的（異步）AJAX調用，這意味着，你要使用集合fetch已經從服務器中檢索數據之前。需要注意的是獲取支持success和error回調，所以你可以這樣做，而不是：

var self = this; 
this.assetList.fetch({ 
    success: function(collection, response) { 
     $('#content').html(self.assetListView.render().el); 
    } 
}); 

或者你可以綁定回調到集合的reset活動爲fetch將重置集合。然後在集合的reset事件被觸發時呈現您的assetListView。

此外，您assetList是一個集合，所以你應該做的：

this.assetListView = new VideoListView({collection: this.assetList}); 

和：

window.VideoListView = Backbone.View.extend({ 
    tagName: 'ul', 

    render: function(eventName) { 
     $(this.el).html(""); 
     _.each(this.collection.models, function(video) { 
      // ...