How do I make a computed, filtered property?

Question

I've got something like this:

Epic = Ember.Object.extend({
    children:[],
    children_filtered: function(){        
        return this.get("children").filterProperty("archived",false);
    }.property("children"),
    init: function() {
      this._super();
      this.set("children", Ember.ArrayController.create({content:[]}) );
      this.set("stories",  Ember.ArrayController.create({content:[]}) );
    },
});

Note the children_filtered computed property.

If I use children_filtered in a view...

{{#each content.children_filtered }}
  hi
{{/each}}

My application hangs with cpu @ 100%

Any ideas what I'm doing wrong? Is there a better pattern to follow for an object that has a list of items plus a list of filtered items?

Answer 1

Your problem is that you need the computed property to be set as cacheable. Otherwise, its value is recomputed upon every iteration of the #each. There has been discussion about whether cacheable should be the default for all computed properties.

children_filtered: function(){        
  return this.get("children").filterProperty("archived",false);
}.property("children").cacheable()

Here's a jsFiddle example: http://jsfiddle.net/ebryn/9ZKSY/