Backbone.js空数组属性

Question

我在Backbone.js模型中遇到一个奇怪的问题，其中数组成员显示为空白。看起来像这样：var Session = Backbone.Model.extend({    defaults: {        // ...        widgets: []    },    addWidget: function (widget) {        var widgets = this.get("widgets");        widgets.push(widget);        this.trigger("change:widgets", this, widgets);    },    // ...    // I have a method on the model to grabbing a member of the array    getWidget: function (id) {        console.log(this.attributes);        console.log(this.attributes.widgets);        // ...    }});然后，我通过添加小部件addWidget。尝试getWidget结果时（在Chrome中）是这样的：Object    widgets: Array[1]        0: child        length: 1        __proto__: Array[0]    __proto__: Object[]它表明在记录时窗口小部件不是空的，this.attributes但在记录时它显示为空this.attributes.widgets。有人知道会导致什么吗？编辑 我已经更改了模型，以在初始化方法中实例化小部件数组，以避免在多个实例之间进行引用，并且我开始使用没有任何运气的主干嵌套。

Answer 1

注意信任控制台，通常会有异步行为会使您绊倒。

您期望console.log(x)表现得像这样：

你打电话console.log(x)。

x 被转储到控制台。

console.log(x)调用后立即执行语句。

但这不是发生的情况，实际情况更像是这样：

你打电话console.log(x)。

浏览器获取对的引用x，并将“真实” console.log调用排队，以备后用。

JavaScript的其他各个部分都运行（或不运行）。

后来，console.log从通话（2）各地得到倾销的当前状态x到控制台，但这x并不一定匹配x，因为它是在（2） 。

就您而言，您正在执行以下操作：

console.log(this.attributes);

console.log(this.attributes.widgets);

所以你在（2）有这样的东西：

         attributes.widgets

             ^         ^

             |         |

console.log -+         |

console.log -----------+

然后在（3）中发生了一些事情，它有效地做到了this.attributes.widgets = [...]（即更改了attributes.widget引用），因此，当（4）出现时，您将得到以下结果：

         attributes.widgets // the new one from (3)

             ^

             |

console.log -+

console.log -----------> widgets // the original from (1)

这使您看到两种不同的版本widgets：新版本收到（3）中的内容，而原始版本为空。

执行此操作时：

console.log(_(this.attributes).clone());

console.log(_(this.attributes.widgets).clone());

你抓住的副本this.attributes和this.attributes.widgets附加到该console.log电话，以（3）将不会与您参考干扰，你在控制台中看到有意义的结果。

这就是答案：

它表明在记录时窗口小部件不是空的，this.attributes但在记录时它显示为空this.attributes.widgets。有人知道会导致什么吗？

至于潜在的问题，您可能在fetch某个地方打了电话，而没有考虑到它的异步行为。解决方案可能是绑定到"add"or "reset"事件。

Answer 2

请记住，[]在JS中，它只是的别名new Array()，并且由于对象是通过引用传递的，因此您的Session模型的每个实例都将共享同一数组对象。这会导致各种问题，包括数组似乎为空。

要按照您想要的方式工作，您需要在构造函数中初始化小部件数组。这将为每个Session对象创建一个唯一的小部件数组，并可以缓解您的问题：

var Session = Backbone.Model.extend({

    defaults: {

        // ...

        widgets: false

    },

    initialize: function(){

        this.set('widgets',[]);

    },

    addWidget: function (widget) {

        var widgets = this.get("widgets");

        widgets.push(widget);

        this.trigger("change:widgets", this, widgets);

    },

    // ...

    // I have a method on the model to grabbing a member of the array

    getWidget: function (id) { 

        console.log(this.attributes);

        console.log(this.attributes.widgets);

    // ...

    }

});