EmberJS计算属性基于阵列不工作

问题描述：

我有一个EmberJS控制器具有以下计算属性：EmberJS计算属性基于阵列不工作

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

其设定我正在使用模板来有条件地显示HTML一个布尔标志。

我也有一个按钮，即，当点击时，采用的形式的数据和如果我改变addRequirement函数将此代替通过调用addRequirement动作

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 
    } 
}

推到selectedRequirements数组中的元素，然后如预期的那样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的计算性能依赖于阵列上被观察的是作为一个COMPLE不同的阵列？

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

为什么不你只需使用'hasSelectedRequirements：Ember.computed.bool（'selectedRequirements.length'）'？顺便说一下，使用'pushObject'，而不是'push'。 – 2016-07-07 19:57:56

答

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

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

@lkgarrison酷。所以如果这个问题解决了，请接受我的文章作为答案 –

答

似乎Ember的计算属性（至少使用阵列观察。[]语法）要求以识别变化的新的数组。因此，我已经找到了最好的解决办法是使用切片创建数组的副本：

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动作被调用时设置适当

EmberJS计算属性基于阵列不工作

相关推荐