EmberJS基于数组计算的属性不起作用

vmdwslir  于 2022-12-03  发布在  其他
关注(0)|答案(3)|浏览(132)

我有一个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函数改为this,则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语句从未运行)。为什么计算属性无法识别selectedRequirements数组已被修改?如何修复计算属性代码?

pxyaymoc

pxyaymoc1#

使用pushObject的方式与this.get('selectedRequirements').pushObject(obj);相同

ltskdhd1

ltskdhd12#

看起来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
    }
}

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

eeq64g8w

eeq64g8w3#

使用pushObject而不是push以及使用removeObject而不是splice将触发computed属性。

相关问题