Backbone 收藏中消失的模型

Question

我有一个 Backbone 模型 line，其中包含模型 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"))<模型中的 /code> 会产生这个相当正常的对象：

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() 是一个异步过程，因此您在其之后编写的代码可能会在获取结果从服务器返回之前触发。

您需要修改代码才能在获取返回后运行所有内容。最简单的方法是使用 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 调用已返回并填充集合。

希望有帮助