Unable to update template when new data is added to store - ember.js

Question

I am trying to figure out how to properly perform save using ember data. My models are defined as:
AS.AnalyticsRun = DS.Model.extend({
'exerciseId' : DS.attr('number'),
'exerciseRunId' : DS.attr('number'),
'queued' : DS.attr('boolean'),
'final' : DS.attr('boolean'),
'analyticsRunParameters' : DS.hasMany('analyticsRunParameter')
});
AS.AnalyticsRunParameter = DS.Model.extend({
'name' : DS.attr('string'),
'category' : DS.attr('string'),
'filteredOut' : DS.attr('boolean', { 'default' : false }),
'equalsDefaultValue' : function() {
/* computed property : returns css class name that should be used for the row with parameter having value other than default one*/
return this.get('value') == this.get('default');
}.property('value', 'default'),
'analyticsRun' : DS.belongsTo('analyticsRun')
});
And in my controller I have a function that performs an insert:
createNewAnalyticsRun : function(createRunFrom, createRunFromId){
var self = this;
$.ajax({
type: "POST",
url: AS.baseURL+"analyticsRuns",
data: {"createFrom": createRunFrom, "id" : createRunFromId, "exerciseId" : AS.Analytics.get('exerciseId'), "exerciseRunId" : AS.Analytics.get('exerciseRunId')},
success: function(newAnalyticsRun){
self.get('store').push('analyticsRun', newAnalyticsRun.analyticsRun);
for(var i = 0, len = newAnalyticsRun.analyticsRunParameters.length; i<len; i++){
self.get('store').push('analyticsRunParameter', newAnalyticsRun.analyticsRunParameters[i]);
}
},
dataType: "JSON"
});
}
My route looks like:
AS.AnalyticsRunsIndexRoute = Ember.Route.extend({
model : function() {
var store = this.get('store');
return store.find('analyticsRun',{'exerciseId':1});
}
});
This setup works perfectly(updates my template with added data on save) when my route is setup like:
return store.find('analyticsRun');
But with
return store.find('analyticsRun',{'exerciseId':1});
my template does not get updated upon save even when the added record has exerciseId of 1. When I refresh my page, the newly added data shows up. I am pretty sure that adding filter to the find is causing the issue.
SOLUTION: I ended up using jquery ajax call to rest api to get the data in confluence with the solution provide by #sly7_7, like this
AS.AnalyticsRunsIndexRoute = Ember.Route.extend({
model : function() {
var store = this.get('store'), self = this;
var exerciseId = //get exercise id from some other logic
$.ajax({
type: "GET",
url: AS.baseURL+"analyticsRuns",
data: {"exerciseId" : exerciseId},
success: function(analyticsRunData){
for(var i = 0, len = analyticsRunData.analyticsRuns.length; i<len; i++){
self.get('store').push('analyticsRun', analyticsRunData.analyticsRuns[i]);
}
for(i = 0, len = analyticsRunData.analyticsRunParameters.length; i<len; i++){
self.get('store').push('analyticsRunParameter', analyticsRunData.analyticsRunParameters[i]);
}
},
dataType: "JSON"
});
//perfect since I need to return model anyways without calling find
return store.filter('analyticsRun', function(analyticRun){
return analyticRun.get('exerciseId') == exerciseId;
});
},
setupController : function(controller,model){
this._super(controller,model);
controller.set('analyticsRunSelectOptions',controller.initAnalyticsRunSelectOptions());
this.controllerFor('analysisTemplates').set('model',controller.get('store').find('analysisTemplate'));
}
});

Answer 1

Did you try to use store.filter instead of store.find ? If what you want is filtering and keeping the result as a live array, then filter is the way to go.
In the model hook, I would write something like:
AS.AnalyticsRunsIndexRoute = Ember.Route.extend({
model : function() {
store.find('analyticsRun', {exerciseId: 1});
return store.filter('analyticsRun', function(analyticRun){
return analyticRun.get('exerciseId') == 1;
});
}
});