Backbone集合中消失的模型

Question

我有一個Backbone模型line，其中包含模型Stop的集合。 在某一點上，我想遍歷線路中的停靠點，並使用下劃線功能reduce獲得沿線的總行程時間。

但這並不奏效。似乎某些時候收藏會發生某些事情。 它似乎只包含一個沒有有意義屬性的對象，儘管我知道它已經用四個有效屬性的停止模型填充。

型號：

App.models.Line = Backbone.Model.extend({ 
    initialize: function() { 
     var stops = new App.models.Stops({ 
      model: App.models.Stop, 
      id: this.get("id") 
     }); 
     stops.fetch(); 
     this.set({ 
      stops: stops 
     }); 
     this.set({unique: true}); 
     this.calculateTotalTime(); 
    }, 
    calculateTotalTime: function() { 
     this.get("stops").each(function(num) { 
      console.log("Model!"); 
     }); 
     console.log("Unique: ", this.get("unique")); 
    } 
}); 

控制檯輸出的方法是：

Model! 
Unique: true 

應該有四 「的模型！」，因爲模型的數量爲四。

最奇怪的是，一切都工作得很好，在控制檯：

window.line.get("stops").each(function(num) { 
      console.log("Model!"); 
     }); 
Model! 
Model! 
Model! 
Model! 

的JS與鏈輪編譯：

//= require ./init 

//= require ./lib/jquery 
//= require ./lib/underscore 
//= require ./lib/backbone 
//= require ./lib/raphael 

//= require_tree ./controllers 
//= require_tree ./models 
//= require_tree ./views 

//= require ./main 

init.js：

window.App = {}; 
App.views = []; 
App.models = []; 

主.js：

$(function() { 
    window.line = new App.models.Line({name: "4", id: 4}); 
    window.lineView = new App.views.Line({model: line}); 
    $("#outer").append(lineView.render().el); 
}); 

一些其它奇怪的行爲：

console.log(this.get("stops"))在模型產生此相當正常對象：

child 
    _byCid: Object 
    _byId: Object 
    _onModelEvent: function() { [native code] } 
    _removeReference: function() { [native code] } 
    id: 4 
    length: 4 
    models: Array[4] 
    0: Backbone.Model 
    1: Backbone.Model 
    2: Backbone.Model 
    3: Backbone.Model 
    length: 4 
    __proto__: Array[0] 
    __proto__: ctor 

但主叫console.log(this.get("stops").models)，這應該產生陣列，僅此返回，單個對象的陣列沒有有用的屬性：

[ 
    Backbone.Model 
    _callbacks: Object 
    _changed: false 
    _changing: false 
    _escapedAttributes: Object 
    _previousAttributes: Object 
    attributes: Object 
    id: 4 
    model: function(){ return parent.apply(this, arguments); } 
    __proto__: Object 
    cid: "c1" 
    id: 4 
    __proto__: Object 
] 

我懷疑這是所有下降到約的性質有些誤解。很高興爲您提供任何幫助。

Answer 1

stops.fetch()是一個異步進程，所以在服務器返回提取結果之前，您寫入的代碼很可能會被觸發。

您需要修改代碼以在獲取回來後運行所有內容。要做到這一點最簡單的方法是從stops收集reset事件：

App.models.Line = Backbone.Model.extend({ 
    initialize: function() { 
     var stops = new App.models.Stops({ 
      model: App.models.Stop, 
      id: this.get("id") 
     }); 


     // store the stops, and then bind to the event 
     this.set({stops: stops}); 
     stops.bind("reset", this.stopsLoaded, this); 
     stops.fetch(); 

    }, 

    stopsLoaded: function(){ 
     // get the stops, now that the collection has been populated 
     var stops = this.get("stops"); 
     this.set({unique: true}); 
     this.calculateTotalTime(); 
    }, 

    calculateTotalTime: function() { 
     this.get("stops").each(function(num) { 
      console.log("Model!"); 
     }); 
     console.log("Unique: ", this.get("unique")); 
    } 
}); 

它工作在控制檯的原因是因爲你輸入了代碼，以評估模型的停止時，fetch調用有已經返回並填充了該集合。

希望可以幫到