我有一个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数组已被修改?如何修复计算属性代码?
3条答案
按热度按时间pxyaymoc1#
使用
pushObject
的方式与this.get('selectedRequirements').pushObject(obj);
相同ltskdhd12#
看起来Ember的计算属性(至少使用array.[]语法观察)需要一个新的数组来识别更改。因此,我发现的最佳解决方案是使用slice创建数组的副本:
这可保证每次调用addRequirement操作时都能正确设置hasSelectedRequirements计算属性
eeq64g8w3#
使用
pushObject
而不是push
以及使用removeObject
而不是splice
将触发computed
属性。