ember.js - Controller computed property is not showing new data additions immediately, where the data is not those returned from the route model -

summary:

controller computed property issue: in 1 case, can see things getting added not see newly added things (jsbin), , in case can see newly added things added things don't show (jsbin).

second update of aug 26:

so thinking ... have these 2 complementary pieces of code. need combine them , achieve perfection, right? sadly, failed miserably, can see in jsbin, nothing shows @ all. :(

this failed attempt combine 2 recordarrays:

officelist: function(){   var allrecords = [];   console.log("in oficelist");    // record array shows added records   var a_recordarray =  app.office.find({org_id: 'myorgid'});   a_recordarray.foreach(function(record){     allrecords.push(record);   });   console.log(a_recordarray.tostring());   console.log(allrecords.length);    // record array shows newly added records   var b_recordarray = app.office.filter(function(office) {         return office.get('org_id') === 'myorgid';     });   b_recordarray.foreach(function(record){     allrecords.push(record);   });   console.log(b_recordarray.tostring());   console.log(allrecords.length);    // return combination   return allrecords;  }.property('content.@each') 

---

details:

i have simple jsbin app uses controller computed property in code show list of names displayed. problem whenever new name added, have refresh page see getting displayed.

you can see code here.

controller code computed property:

officelist: function(){   return app.office.find({org_id: 'myorgid'}); }.property('content.@each') 

route returning different model:

app.organizationroute = ember.route.extend({   model: function() {     return app.org.find();   } }); 

handlebars:

{{#each officelist}}   <li>{{officename}} </li> {{/each}} 

constraints: need have 'org_id' present , need have route model returning different model model displayed.

update aug 26: jonathan has made progress please see comment answer doesn't solve problem completely.

updated aug 24: added complexity data displayed different returned in router model. (also changed arraycontroller objectcontroller, change has no consequences objectcontroller has content property.), below old stuff:

controller code computed property:

officelist: function(){   return app.office.find({org_id: 'myorgid'}); }.property('office.@each') 

handlebars:

{{#each officelist}}   <li>{{officename}} </li> {{/each}} 

the problem computed property cached , refresh when office.@each changes. office property not defined on controller, office.@each null. want instead content.@each. so:

officelist: function(){   return app.office.find({org_id: 'myorgid'}); }.property('content.@each') 

now page refresh whenever new office added.