javascript - 主干引导集合未正确初始化

Question

我有一个问题，很难注意到，因为在大多数情况下一切正常。只有当我尝试在我的集合初始化函数中操作我的数据时，我才发现问题。

Backbone 文档位于 http://backbonejs.org/#Collection-constructor

“如果您定义了一个初始化函数，它将在创建集合时被调用。”

所以我将其解释为，我的初始化函数只有在我的模型设置好之后才会运行。 “这听起来很理想，”我说，但后来我遇到了这个。

我的 Bootstrap 代码如下:

new MyCollection(<?php if ($data) {echo json_encode($data);} ?>);

我的收藏:

var MyCollection = Backbone.Collection.extend({
    model: MyModel,

    initialize: function() { 
        console.log(this); 
        console.log(this.length);
        this.each(function(model) {
            console.log(model);
        });
    } 
});  

我得到了奇怪的结果。

第一个 console.log(this); 是预期的集合对象:

{ 
    .... 
    models: [3], 
    length: 3 
    .... 
} 

第二个console(this.length);打印出数字0

this.each() 中的控制台没有出现。

发生了什么事？

Answer 1

集合构造函数 looks like this :

var Collection = Backbone.Collection = function(models, options) {
  //...
  this._reset();
  this.initialize.apply(this, arguments);
  //...
  this.reset(models, {silent: true, parse: options.parse});
  //...
};

一步一步:

1. this._reset() 调用执行 this.length = 0 .
2. this.initialize.apply(...)是给你的电话initialize方法。
3. this.reset(...) 会调用 add 添加模型。 add调用将更新集合的 models和 length属性。

所以，当initialize被称为，你将有this.length == 0和 this.models将是一个空数组，因为只有 _reset将在这里被调用。现在我们很容易明白为什么 this.each什么都不做，为什么console.log(this.length)说0 .

但为什么 console.log(this)告诉我们我们有一个填充的集合？嗯，console.log不会立即发生，它只是获取对其参数的引用并稍后将一些内容记录到控制台；到时候console.log开始在控制台中放置一些东西，您将通过上面的(3)，这意味着您将拥有this.models和 this.length你期待看到的。如果你说

console.log(this.toJSON());

或:

console.log(_(this.models).clone())

您会看到 console.log 时的状态当console.log 被调用而不是事物的状态写入控制台。

文档并没有明确说明在 initialize 时应该准备什么。被称为所以你被困在源头上。这并不理想，但至少 Backbone 源是干净直接的。

您会注意到 initialize是这样调用的:

this.initialize.apply(this, arguments);

arguments 那里意味着initialize将收到与构造函数相同的参数，因此您可以根据需要查看那里:

initialize: function(models, options) {
    // The raw model data will be in `models` so do what
    // needs to be done.
}