Ember Data automatic refresh after save

Question

The Ember page I'm working on is to display a of grid of operators and their jobs and have that list automatically update when the user creates a new job. My current best attempt will draw pre-existing jobs on page load, but the page doesn't refresh with any new jobs created using 'saveNewJob' even though I can see the new job in the Data view of Ember Inspector.

Here's the code with some '..snip..' inserted to focus on the important parts:

routes/scheduler.js

export default ember.Route.extend({
    model: function() {
       return { 
          jobs: this.store.query('job', {
             location: session.location,
             date: session.selectedDate
          },
          operators: this.store.query('operator', {
             location: session.location
          }
       }
    },
    action: {
      saveNewJob: function(params) {
        var newJob = this.store.createRecord('job',{
           //job properties from params
        };
        var thisRoute = this;
        newJob.save().then(function(){ thisRoute.refresh() });
      }
    }
}

templates/scheduler.hbs

..snip..
{{#each model.operators as |op|}}
  {{operator-row operator=op jobs=model.jobs}}
{{/each}}

{{outlet}}

templates/components/operator-row.hbs

   <!-- Draw the grid for the operator -->
   ..snip..
   <!--Draw jobs over grid -->
   {{#if jobs.isFulfilled}}
     {{#each jobsForOperator as |job|}}
       {{operator-job job=job}}
     {{/each}}
   {{/if}}

component/operator-row.js

jobsForOperator: Ember.computed('jobs', function() {
  var opId = this.operator.get('id');
  var retVal this.jobs.filter(function(item) {
      return item.get('operator').get('id') === opId;
  });
  <!-- Append some drawing properties to each job in retVal -->
  ..snip...
},
..snip..

I haven't seen a need to add anything to controller/scheduler. The operator-job component is a simple div that uses the drawing properties to correctly place/draw the div in the operator row.

There are various ways for a new job to be created, but I purposefully left them out because they all end up calling 'saveNewJob' and I am able to get a console.log statement to fire from there.

One solution I've tried is adding a 'this.store.findAll('job');' at the start of the model function and then using 'jobs: this.store.filter('job', function() { })' to create the model.jobs property. That sees neither the existing jobs nor the newly created job returned despite seeing my date and location matches return true.

So what am I doing wrong here? Is there a better way to get this refresh to happen automatically? Appreciate any help you all can give.

Keo Keo · Accepted Answer · 2015-12-05T00:43:38

There is function for just this case DS.Store.filter. You use it instead of query. Something like this:

let filteredJobs = this.store.filter(
    'job',
    {location: session.location, date: session.selectedDate},
    job => job.get('location') === session.location && job.get('date') === session.selectedDate
);

Ember Data automatic refresh after save

1 Answers