Backbone集合中消失的模型

Question

我有一个line包含模型集合的Backbone 模型Stop.在某些时候,我想使用Underscore函数迭代线中的停靠点并获得沿线的总行程时间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使用Sprockets编译:

//= 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 = [];

main.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
]

我怀疑这完全归结于对性质的一些误解this.很高兴提供任何帮助.

Answer 1

stops.fetch() 是一个异步过程,所以你在它之后写的代码可能会在fetch的结果从服务器返回之前触发.

你需要修改你的代码,以便在提取回来后运行所有内容.最简单的方法是使用集合中的reset事件stops:

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调用已经返回并填充了集合.

希望有所帮助