How to make a computed, filtered property?

Question

I have 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 computed children_filtered property.

If I use child_filtered in the view ...

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

My application freezes with cpu @ 100%

Any ideas what I'm doing wrong? Is there a better template for an object that has a list of elements as well as a list of filtered elements?

Answer 1

Your problem is that you need the computed property to be set as cacheable . Otherwise, its value is recalculated for each iteration of #each . The debate was whether cacheable should be used by default for all computed properties.

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

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