我实际上正在使用ember-simple-pagination。 它的工作原理很简单: -空疮 -根据实际页面获取数据
事实是过渡一点都不顺利,请自己看: https://streamable.com/sg6sg
有没有办法解决这个问题?我的想法对我说,这将是一种先获取数据,清空排序然后将数据推回存储库的解决方案。
import Component from '@ember/component';
import { computed } from '@ember/object';
import { sort } from '@ember/object/computed';
import { inject as service } from '@ember/service';
export default Component.extend({
store: service(),
posts: computed(function() {
return this.get('store').peekAll('post');
}),
pageSize: 20,
pageNumber: null,
recordCount: null,
sortProps: ['createdAt:desc'],
sortedPosts: sort('posts', 'sortProps'),
loadPosts(getPageNumber) {
const pageSize = this.get('pageSize');
this.get('store').unloadAll('post');
this.get('store').
query('post', {page: {number: getPageNumber, size: pageSize}}).
then((result) => {
this.setProperties({
'recordCount': result.get('meta.record-count'),
'pageNumber': getPageNumber
});
};
},
init() {
this._super(...arguments);
this.loadPosts(1);
},
actions: {
getPage(getPageNumber) {
this.loadPosts(getPageNumber);
}
}
});
答案 0 :(得分:0)
Ola @elo,谢谢您的提问!
当前无法使用开箱即用的解决方案来执行此操作,但是我建议您查看路线的加载状态,以便在加载数据时向用户显示微调框或其他内容。它将使它的震动少一些。
如果您想了解如何设置简单的加载状态,可以按照以下指南进行操作:https://guides.emberjs.com/release/routing/loading-and-error-substates/#toc_loading-substates
当然,会有一种方法来实现您想要的,但是首先您将失去使用商店的某些功能,并且有人可能会争辩说,用户体验可能同样令人沮丧(数据不会按下按钮后突然改变)。我认为在您的情况下使用加载状态是最好的中间立场