ember.js - EmberJS - Filtering array removes template auto binding -

see jsfiddle

before applying filter array auto binding works perfect. after add filter function array, template not automatically refreshing.

to test this.

app.fieldroute = ember.route.extend({   setupcontroller: function(controller, model) {        //scenario 1       //controller.set('model', app.fields);        //scenario 2       controller.set('model', app.fields.filter(function(item, index, enumerable) {         if(item.id === model.id) return true;     }));   } }); 

run jsfiddle scenario 1(comment scenario 2 , uncomment scenario 1) click "gender" click "add" button add item array , it'll reflect in ui.

run jsfiddle again scenario 2. template won't refresh automatically.

your scenario 1 works when setting app.fields content since content holds same memory reference of app.fields array. hence push or pop on array reflected content. filtering operation (in setupcontroller) done once when entered route.

you can have filtering model in controller

  controller.setproperties({'model': app.fields, filteringmodel: model}); 

and filter content

app.fieldcontroller = em.arraycontroller.extend({    displayarray: function(){         return this.get('content').filterproperty('id',this.get('filteringmodel.id'));     }.property('content.@each','filteringmodel')  }); 

here fiddle