Sorting a list in EmberJS and having that reflect in the view

Question

I have a computed property that should sort & fiter like so:

sortedFilteredChildren: function() {
        console.log("sortedFilteredChildren()");
        var filtered = this.get("children").filterProperty("archived",false);
        var sorted = filtered.slice().sort(function(a,b){
            return a.get("order") - b.get("order");
        });
        return sorted;
}.property("@each.order","@each.parent_id","EpicApp.filterOptions.viewArchived").cacheable(),    

I'm using that property as the data source of a CollectionView

If I change the order property of one of it's children, this property does not get re-evaluated. In other words, I don't see the console.log line appear after doing a:

child.set("order",10);

Any idea what I'm doing wrong?

Answer 1

Finally figured this out...

I thought @each applied to the returned value. ie, if any of the order properties on objects in the return value changed then re-evaluate.

But that's not correct. @each applies to the object the computed property is on.

So to do what I needed, I had to do a "[email protected]"

sortedFilteredChildren: function() {
    console.log("sortedFilteredChildren()");
    var filtered = this.get("children").filterProperty("archived",false);
    var sorted = filtered.slice().sort(function(a,b){
        return a.get("order") - b.get("order");
    });
    return sorted;
}.property("[email protected]","[email protected]_id","EpicApp.filterOptions.viewArchived").cacheable(),