ember.jsemberfire

Ember - Sort Model after findAll


I'm using Emberfire in my app, and I'm trying to findAll stats, and then sort that model by a key, like in the following example. But, when I sort this way I lose the ability to see real time updates in my template and I have to reload the page to see the new/updated data in the view.

 model() {
    return this.store
      .findAll('stats', {
        reload: true,
        backgroundReload: true
      })
      .then(stats => stats.sortBy('date'));
  }

Solution

  • You have to define a computed property at your controller or a component, which returns the sorted stats. Do not sort your data at route's model hook. Just return the promise of findAll.

    For example:

    //controller.js or component.js 
    sortedStats: computed('model.@each.date', function() {
      return this.get('model').sortBy('date');
    })
    

    Furthermore ember offers a sort macro:

    import { sort } from '@ember/object/computed';
    

    By using it you can solve your requirement more elegant:

    // ...
    this.init() {
      this._super(...arguments);
      this.set('sortDefinition', ['date:asc']);
    }
    sortedStats: sort('model.@each.date', 'sortDefinition')
    // ...