dimanche 20 décembre 2015

How to make Ember computed array based on DS.hasMany property update when a new record is created?

DEBUG: -------------------------------
DEBUG: Ember             : 2.2.0
DEBUG: Ember Data        : 2.1.0
DEBUG: jQuery            : 2.1.4
DEBUG: Model Fragments   : 2.0.0
DEBUG: Ember Simple Auth : 1.0.0
DEBUG: -------------------------------

My model has a computed property upcomingReminders that filters and sorts the DS.hasMany property, reminders.

# app/models/job.js
import Ember from 'ember';
import DS from 'ember-data';

export default DS.Model.extend({
  // ...
  reminders: DS.hasMany( 'reminder', { "async": true } ),
  undoneReminders: Ember.computed.filterBy('reminders', 'done', false),
  upcomingReminders: Ember.computed.sort('undoneReminders', 'undoneSorting')
});

I create a new record in the route like so:

# app/routes/dashboard/jobs/show/reminders/new.js
import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    let newRecord = this.get('store').createRecord( 'reminder' , { 
      target: this.modelFor("dashboard.jobs.show")
    });
    return newRecord;
  }
});

And then save it from the controller like so:

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    save() {
      this.get('model').save().then( (model) => {
        let target = model.get('target');
        this.transitionToRoute('dashboard.jobs.show.reminders', target );
      });
    }
  }
});

The template looks like this:

<div class="valign-wrapper right">
  {{#link-to "dashboard.jobs.show.reminders.new" model class="right"}}
    {{md-btn text="Add Reminder" icon='mdi-content-add' class='green'}}
  {{/link-to}}
</div>

{{#each model.upcomingReminders as |reminder|}}
  {{reminder-widget reminder=reminder}}
{{else}}
  There are no upcoming reminders
{{/each}}

{{outlet}}

When I save the model, it won't show up in the list until I refresh the page, although it will show up in a list of all reminders immediately, and shows up in the list if I change the each block to iterate over model.reminders (the raw DS.hasMany property, as opposed to the sorted & filtered property). Even if I navigate to a route with a list of all reminders, and then return, it won't be there 'til after a refresh.

So how can I trigger a rerender of this computed property?




Aucun commentaire:

Enregistrer un commentaire