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 时显示widgets 不为空，但记录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?

编辑我已经更改了模型以在初始化方法中实例化小部件数组以避免跨多个实例的引用，并且我开始使用 骨干嵌套 没有运气.

EDIT I've changed the model to instantiate the widgets array in the initialization method to avoid references across multiple instances, and I started using backbone-nested with no luck.

推荐答案

在信任控制台时要小心，经常有异步行为会让您感到困惑.

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. 稍后，来自 (2) 的 console.log 调用开始将 x 的当前状态转储到控制台中，但是这个 x 不一定像 (2) 中的 x 一样匹配.

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) 有这样的东西:

So you have something like this at (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)

这会让您看到两种不同版本的 widgets:新的在 (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());

您正在获取附加到 console.log 调用的 this.attributes 和 this.attributes.widgets 的副本，因此 (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 时显示widgets 不为空，但记录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?

就潜在问题而言，您可能在某处有一个 fetch 调用，并且您没有考虑其异步行为.解决方案可能是绑定到 "add" 或 "reset" 事件.

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屋！