为什么不是这个为@each计算的属性射击？

Question

我正在尝试使用计算属性，该属性观察数组中每个元素的特定属性的更改。这是小提琴。点击更改按钮，并且计算的属性不会触发。为什么？

这里是小提琴： http://jsfiddle.net/inconduit/PkT8x/145/

和这里的相关代码

App.color1 = Ember.Object.create({ color : "red"}); 

// a contrived object that holds an array of color objects 
App.colorsHolder = Ember.Object.create({ 
    colors : Ember.A([App.color1]), 
}); 

App.ApplicationController = Ember.Controller.extend({ 
    colorsHolder : App.colorsHolder, 

    // this should fire when you click the change button, but it does not 
    colorsContainBlue : function() { 
     console.log("fired colorsContainBlue"); 
     this.colorsHolder.colors.forEach(function(colorObj) { 
      if(colorObj.get('color') == 'blue') 
       return true; 
     }); 
     return false; 
    }.property('colorsHolder.@each.color'),         

    // this is a function called by an action in the template 
    changeToBlue: function() { 
     App.color1.set('color','blue'); 
     console.log("changed the color to: " + App.color1.get('color')); 
    } 
}); 

Answer 1

这是小提琴根据您所提供的一个工作示例。

http://jsfiddle.net/skane/PkT8x/147/

colorsContainBlue : function() { 
    console.log("fired colorsContainBlue"); 
    if (this.colorsHolder.filterProperty('color', 'blue').length !== 0) { 
     return true; 
    } 
    return false; 
}.property('colorsHolder.@each.color'),         

changeToBlue: function() { 
    this.get('colorsHolder').objectAt(0).set('color','blue'); 
} 

我已经在你的例子包括改变很多东西：

1. changeToBlue现在改变了ApplicationController中的colorHolder对象的属性（重要）
2. 计算属性现在观察colorsHolder对象和具体观察他们的“颜色”托
3. 我已经使用filterProp erty以确定是否有任何对象具有一个颜色值===“蓝色”