时间戳

首页 > 解决方案 > 未刷新页面未重新加载模型的 Ember 列表

ember.js - 未刷新页面未重新加载模型的 Ember 列表

问题描述

通过使用“已发布”属性对列表进行排序，我仅显示已发布的文章。

现在，当我编辑一篇文章并将其从“已发布”设置为“草稿”然后返回列表时，即使我在控制器中编写了过滤器，我也会看到“草稿”文章。

我是怎么存钱的

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

路线 ：

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

控制器 ：

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

此外，在我刷新页面之前，有些文章仍然是“草稿”，当我刷新它们时，它们是“已发布”......只需转到另一个页面并返回列表，或者进行浏览器刷新就足以正确列出“已发布”文章等解决了我的问题。

我想在哪里解决我的问题而不刷新？谢谢

标签： ember.jsember-data

解决方案

根据您的问题和评论，我在这里做出了最好的猜测。拥有完整的路线和控制器代码会很有帮助，所以如果这没有帮助，我将需要这些信息。

基于：

只需转到另一个页面并返回列表，或者刷新浏览器就足以正确列出“已发布”的文章，从而解决我的问题。

我猜想加载文章时存在问题，否则计算属性在isPublished更改时没有被重新评估。我会尝试加载所有内容并将其过滤到计算属性中。这可能看起来像：

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('model.@each.isPublished', function () {
    return this.model.filterBy('isPublished');
  }),
});

这将加载模型挂钩中的所有文章，然后在计算属性中处理过滤。当isPublished任何一篇文章的属性发生变化时，列表应该更新。

更新延迟的原因可能是由于您保存更改的方式。运行时.save()，它是一个异步操作，您需要在转换之前等待。尝试：

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

这将等待承诺首先解决。

推荐阅读