emberjs refreshing ArrayController with arrangedContent and #each crashes - ember.js

Question

Hy and thanks for reading :
I have an issue with Ember.ArrayController and arrangedContent. The senario is as follow :
Items inside my arrayController can be modified by some actions.
My arrangedContent is filtred on some of those items properties.
Thus if an observed item property change the arrangedContent property should be refreshed
I achieve this by setting the property() of my arrangedContent with "content.#each.myproperty"
All works fine, except if i try to refresh the model from the route i then get an error message TypeError: Cannot read property 'destroy' of undefined
at ContainerView.extend.arrayWillChange
In some case it would work but duplicate the content every time the refresh() is triggered
with some minimal code it may become more clear ...
App.IndexRoute = Ember.Route.extend({
model : function(){
return [App.Cars.create({color : "red", model : "march"}),
App.Cars.create({color : "yellow", model : "alto"}),
App.Cars.create({color : "blue", model : "gundam"}) ];
},
actions : {
reload : function(){
this.refresh();
}
}
});
App.IndexController = Ember.ArrayController.extend({
arrangedContent : function(){
var data= this.get("content");
data=data.filter(function(elem){
return elem.get("color").match(new RegExp("el","gi"))!==null;
});
return data;
}.property("lenght","content.#each.color"),
actions : {
allYell :function(){
this.get("content").forEach(function(elem){
elem.set("color","yellow");
});
},
erase : function(){
if(this.get("length")>0){
this.get("content").removeAt(0);
}
}
}
});
a JSBin can be found here http://jsbin.com/yebopobetu/3/edit?html,js,console,output

Answer 1

I've never seen anyone recommend overriding arrangedContent. I honestly wouldn't recommend it.
App.IndexController = Ember.ArrayController.extend({
foos : function(){
var data= this.get("model");
return data.filter(function(elem){
return elem.get("color").match(new RegExp("el","gi"))!==null;
});
}.property("#each.color"),
actions : {
allYell :function(){
this.forEach(function(elem){
elem.set("color","yellow");
});
},
erase : function(){
if(this.get("length")>0){
this.removeAt(0);
}
}
}
});
http://jsbin.com/sivugecunu/1/edit