Computed properties on an itemController when using a filtered model

1

Can someone help me understand why my computed property fullName isn’t working with the filteredPeople list?

As you can see on this jsbin, it works fine when I use the computed on the model.

http://emberjs.jsbin.com/gojilofa/2/edit

2

Since you’re filtering against the model array, those are the raw objects not wrapped in your itemController.

Changing your computed filter to ...Ember.computed.filter('@this', function... should do the trick.

3

using @this didn’t seem to help

4

Ah, I didn’t actually test your code…my apologies. The issue I described was indeed part of the problem.

The second issue is related to how you’re invalidating the computed property…by calling .property on it. I’ve never done this…so, not sure wether that’s considered appropriate (or is expected to work, for that matter).

If you really wanted that behavior where other non-array properties invalidate the entire reduced array, you could write your own Reduce Computed Property.

That being said, I’ve handled this in a different way without having to create a new Reduce Computed property that seems to work well…try something like this:

App.PersonController = Ember.ObjectController.extend({
  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  }.property('firstName','lastName'),

  matchesFilter: function() {
    var searchFilter = this.get('parentController.searchFilter');
    var regex = new RegExp(searchFilter, 'i');
    return this.get('firstName').match(regex);
  }.property('parentController.searchFilter')
});

App.IndexController = Ember.ArrayController.extend({
  itemController: 'person',
  searchFilter: 'kris',
  filteredPeople: Em.computed.filterBy('@this', 'matchesFilter')
});
1 Like
5

After a lot of pulling out of my hair this is now working. I was confused because the jsbin was working but my app wasn’t. Apparently it was fixed with canary, because I installed canary and it’s working fine.

1 Like