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

Posted 2023-02-23

【中文标题】EmberJS 基于数组的计算属性不起作用

【英文标题】：EmberJS computed property based on array not working

【发布时间】：2016-11-10 05:58:28

【问题描述】：

我有一个 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 语句永远不会运行）。为什么计算属性无法识别 selectedRequirements 数组已被修改，如何修复计算属性代码？

【问题讨论】：

你为什么不直接使用hasSelectedRequirements: Ember.computed.bool('selectedRequirements.length')？顺便说一句，使用pushObject，而不是push。

【参考方案1】：

像this.get('selectedRequirements').pushObject(obj);一样使用pushObject

【讨论】：

Ember MutableArray 类中的 pushObject 方法正是我想要的。我不能告诉你我搜索了多长时间，但找不到这个问题的答案。我知道根本问题是什么，但不知道 Ember 解决方案。希望这篇文章对其他人有所帮助。

@lkgarrison 酷。所以如果这个问题得到解决，请接受我的帖子作为答案

【参考方案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
    

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

【参考方案3】：

使用pushObject 代替push 和removeObject 代替splice 将触发computed 属性。