javascript - Ember controller computed property (of type Object) update doesnt work -

javascript - Ember controller computed property (of type Object) update doesnt work -

i trying combine sorting properties (sortproperties , sortascending) filters on list of data.

i have arraycontroller , 2 actions, 1 sorting , 1 filters. filter action sets properties on filters object, property depends on filters not re-calucalted.

relevant controller code:

app.postscontroller = ember.arraycontroller.extend({ filters: ember.object.create({}), filteredcontent: function () { var ret = this.get('arrangedcontent'); object.keys(this.filters).foreach(function (name) { ret = ret.filter(this.filters.get(name)); }, this); homecoming ret; // expect cause `filteredcontent` depend on `filters` property }.property('arrangedcontent', 'filters'), actions: { sort: function(property, issorted) { this.set('sortproperties', [property]); if (issorted) { this.toggleproperty('sortascending'); } else { this.set('sortascending', true); } }, filter: function (property, value) { var filters = this.get('filters'); switch (property) { case 'id': // expect phone call `set` trigger `filteredcontent` property update filters.get('id') || filters.set('id', function (post) { homecoming post.get('id') < value; }); break; case 'title': filters.get('title') || filters.set('title', function (post) { homecoming post.get('title').indexof(value) !== -1; }); break; } } } });

so, question why filters.set() doesn’t cause filteredcontent function run?

all code here – http://jsbin.com/silun/7/edit?html,js,output

you updating properties on filters object, need observe specific object attributes changing.

you can explicitly listing attributes depend on:

filteredcontent: function () { //... }.property('arrangedcontent', 'filters.id', 'filters.title'),

or using shorthand notation called property brace expansion.

filteredcontent: function () { //... }.property('arrangedcontent', 'filters.{id,title}'),

updated jsbin: http://jsbin.com/nuyegowede/1/edit

update

new jsbin filters array: http://jsbin.com/yayihazoza/1/edit

if want unlimited filter attributes without updating computed property can utilize configure filters array instead of object. lets utilize ember's array observer features (@each automatically update filtering when array changes.

filters array of filter objects in form:

{ name: 'name-of-filter', filter: function(){ // implementation of filter here } }

update filter force filter objects filters array:

filter: function (property, value) { var filters = this.get('filters'); console.log("filter", property, value); switch (property) { case 'id': if (filters.findby('name', 'id') === undefined) { filters.pushobject({ name: 'id', filter: function (post) { homecoming (post.get('id') < value); } }); } break; case 'title': if (filters.findby('name', 'title') === undefined) { filters.pushobject({ name: 'title', filter: function (post) { homecoming post.get('title').indexof(value) !== -1; } }); } break; } }

update computed property utilize new filter objects , hear changes each item in array

filteredcontent: function () { var ret = this.get('arrangedcontent'); var filters = this.get('filters'); filters.foreach(function (filterobj) { ret = ret.filter(filterobj.filter); }, this); homecoming ret; }.property('arrangedcontent', 'filters.@each'), // <-- notice new @each

javascript ember.js