Backbone.js的空数组属性 [英] Backbone.js Empty Array Attribute

问题描述

我遇到了型号Backbone.js的一个奇怪的问题，即正在显示空白阵列成员。它看起来是这样的：

I'm running into an odd issue with a Backbone.js Model where an array member is being shown as blank. It looks something like this:

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）是这样的：

I then add a widget via addWidget. When trying getWidget the result I get (in Chrome) is this:

Object
    widgets: Array[1]
        0: child
        length: 1
        __proto__: Array[0]
    __proto__: Object
[]

它的显示窗口小部件登录时不为空 this.attributes 但登录时，它显示为空的 this.attributes.widgets 。有谁知道什么会导致此？

It's showing that widgets is not empty when logging this.attributes but it's shown as empty when logging this.attributes.widgets. Does anyone know what would cause this?

修改
我已经改变了模型实例的初始化方法来避免跨多个实例的引用小部件数组，我开始使用骨干，嵌套的，没有运气。

推荐答案

要小心信任控制台，往往存在异步行为，可你绊倒。

Be careful about trusting the console, there is often asynchronous behavior that can trip you up.

您正在期待的console.log（X）的行为是这样的：

You're expecting console.log(x) to behave like this:

1. 您拨打的console.log（X）。


2. X 转储到控制台。


3. 继续执行与该语句紧随你的的console.log（X）电话。

1. You call console.log(x).
2. x is dumped to the console.
3. Execution continues on with the statement immediately following your console.log(x) call.

但是，这不会发生什么变化，现实更像是这样的：

But that's not what happens, the reality is more like this:

1. 您拨打的console.log（X）。


2. 浏览器抓取到一个参考 X ，并排队真正的的console.log 呼吁后


3. JavaScript的运行（或没有）的各种其他位。


4. 后来从的console.log 通话（2）左右到达倾销 X <当前状态/ code>进入控制台，但这 X 不一定会匹配 X 因为它是在< STRONG>（2）



1. You call console.log(x).
2. The browser grabs a reference to x, and queues up the "real" console.log call for later.
3. Various other bits of JavaScript run (or not).
4. Later, the console.log call from (2) gets around to dumping the current state of x into the console but this x won't necessarily match the x as it was in (2).

在你的情况，你这样做是：

In your case, you're doing this:

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

所以，你有这样的事情在（2）

         attributes.widgets
             ^         ^
             |         |
console.log -+         |
console.log -----------+

再有事情发生在（3）有效地做 this.attributes.widgets = [...] （即改变 attributes.widget 参考）等，当（4）恶有恶报，你有这样的：

and then something is happening in (3) which effectively does this.attributes.widgets = [...] (i.e. changes the attributes.widget reference) and so, when (4) comes around, you have this:

         attributes.widgets // the new one from (3)
             ^
             |
console.log -+
console.log -----------> widgets // the original from (1)

这让你看到两个不同版本小部件：一个收到东西在新一（3）和原来里面是空的。

This leaves you seeing two different versions of widgets: the new one which received something in (3) and the original which is empty.

当你这样做：

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

你抓住的副本 this.attributes 和 this.attributes.widgets 附加到了的console.log 要求这样的（3）不会影响您参考干扰，你在控制台中看到有意义的结果。

you're grabbing copies of this.attributes and this.attributes.widgets that are attached to the console.log calls so (3) won't interfere with your references and you see sensible results in the console.

这是这个问题的答案：

它的显示窗口小部件登录时不为空 this.attributes 但登录时，它显示为空的 this.attributes.widgets 。有谁知道什么会导致此？

It's showing that widgets is not empty when logging this.attributes but it's shown as empty when logging this.attributes.widgets. Does anyone know what would cause this?

至于潜在的问题的话，你可能有一个取打电话的地方和你不采取它的异步行为考虑在内。该解决方案可能是绑定到添加或复位事件。

As far as the underlying problem goes, you probably have a fetch call somewhere and you're not taking its asynchronous behavior into account. The solution is probably to bind to an "add" or "reset" event.

这篇关于Backbone.js的空数组属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！