Ember list of model not reloaded without refreshing page

Question

I'm displaying only published articles by sorting my list with the 'published' attribute.

Now when I edit an article and set it from 'published' to 'draft' and then I return to the list I see the 'draft' article even if I wrote a filter in my controller.

How i'm saving

article.set('isPublished', true);
article.save();
this.transitionToRoute('article.list');

Route :

  model() {
    return this.get('store').findAll('articles');
  }

Controller :

articleSorted: computed.filterBy('model', 'isPublished', true),

Besides before I refresh the page some article are still 'draft' and when I refresh they are 'published'... Just going to another page and return to the list, or doing a browser refresh is enough to list properly only 'published' articles and so solve my problem.

Where am I suppose to look to solve my problem without refreshing ? Thanks

Answer 1

I'm taking a best guess here based on your question and comments. Have full route and controller code would be helpful, so if this doesn't help I'll need that information.

Based on:

Just going to another page and return to the list, or doing a browser refresh is enough to list properly only 'published' articles and so solve my problem.

I would guess that there is an issue loading the articles or else the computed property is not being re-evaluated when isPublished changes. I would try to load everything and filter it in a computed property. This might looks like:

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default Route.extend({
  store: service(),
  model() {
    return this.store.findAll('article');
  }
});

import { computed } from '@ember/object';
import Controller from '@ember/controller';

export default Controller.extend({
  articles: computed('[email protected]', function () {
    return this.model.filterBy('isPublished');
  }),
});

This will load all the articles in the model hook and then handle the filtering in a computed property. When the isPublished property changes on any one of the articles then the list should updated.

The reason for the delay in updating is probably due to the way you're saving the change. When running .save() it's an asynchronous operation that you need to wait on before transitioning. Try:

actions: {
  async publishArticle(article){
    article.set('isPublished', true);
    await article.save();
    this.transitionToRoute('article.list');
  }
}

Which will wait for the promise to resolve first.