EmberJS 基于数组计算属性无效

Question

我有一个 EmberJS 控制器具有以下计算属性:

hasSelectedRequirements: Ember.computed('selectedRequirements.[]', function()    {
    console.log("this should get printed but it doesn't");
    return this.get('selectedRequirements').length > 0;
}),

它设置了我在模板中使用的布尔标志以有条件地显示 html。

我还有一个按钮，单击该按钮时，获取表单数据并通过调用 addRequirement 操作将一个元素推送到 selectedRequirements 数组中

actions: {
    addRequirement() {
        ...
        // extract data from form and create the requirement variable

        var selectedRequirements = this.get('selectedRequirements');
        selectedRequirements.push(requirement);
        this.set('selectedRequirements', selectedRequirements);

        console.log(this.get('selectedRequirements')); // does print as expected
    }
}

如果我改为将 addRequirement 函数改为此函数，则 hasSelectedRequirements 计算出的属性函数处理程序是预期的运行，并且 console.log 语句有效：

actions: {
    addRequirement() {
        ...
        // extract data from form and create the requirement variable

        var selectedRequirements = this.get('selectedRequirements');
        selectedRequirements.push(requirement);

        // create a new, local array
        var arr = new Array();
        arr.push(1);

        this.set('selectedRequirements', arr);

        console.log(this.get('selectedRequirements')); // does print as expected
    }
}

似乎 Ember 的计算属性依赖于正在观察的数组是一个完全不同的数组？

问题是计算的属性无法识别元素已添加到 selectedRequirements 数组，并且计算的属性函数永远不会被调用（console.log 语句永远不会运行s）。为什么计算的属性无法识别已修改的 selectedRequirements 数组，我该如何修复计算的属性代码？

Answer 1

像this.get('selectedRequirements').pushObject(obj);

一样使用pushObject

Answer 2

似乎 Ember 的计算属性（至少使用 array.[] 语法进行观察）需要一个新数组才能识别更改。因此，我找到的最佳解决方案是使用 slice:

创建数组的副本

actions: {
    addRequirement() {
        ...
        // extract data from form and create the requirement variable

        var selectedRequirements = this.get('selectedRequirements');
        selectedRequirements.push(requirement);
        this.set('selectedRequirements', selectedRequirements.slice(0));

        console.log(this.get('selectedRequirements')); // does print as expected
    }
}

这保证了 hasSelectedRequirements 计算属性在每次调用 addRequirement 操作时都被正确设置

Answer 3

使用 pushObject 而不是 push 和 removeObject 而不是 splice 将触发 computed 属性.

EmberJS 基于数组计算属性无效

EmberJS computed property based on array not working

javascript

arrays

ember.js

computed-properties

EmberJS 基于数组计算 属性 无效

EmberJS computed property based on array not working

javascript

arrays

ember.js

computed-properties

EmberJS 基于数组计算属性无效