EmberJS 中如何处理 ajax 分页？

Question

我是 EmberJS 的新手，并已开始开发 REST 应用程序。 目前我想对我列出的项目实施分页。我对此进行了一些搜索，但似乎无法找到最好的方法。

控制器： 我已经使用 queryParams 提取了 ember URL 中的参数。 在这里，我不知道如何应用更改的分页值。

export default Ember.Controller.extend({
 queryParams:['page', 'size'],
 page: 1,
 size: 1,
 action: {
   nextPage: function() {
     this.page += 1;
     //how to retrieve data here ?
   },
   previousPage: function() {
     this.pageNumber -= 1;
     //how to retrieve data here ?
   }
 }
})

路由：按照我的路由中的这个配置，我能够将 Ember URL 中的分页参数传递给 API URL 参数。

export default Ember.Route.extend({
  model: function(params) {
  return this.store.query('task', {
    page: params.page,
   _end: params.size
  });
 }
});

即使在搜索了许多引用之后，我仍然对如何将分页 URL 参数呈现到视图以及如何将更改应用于分页感到困惑。

坦率地说，我对整体概念本身有点困惑。

对此做一点解释会很有帮助。

Answer 1

我不确定您的问题是什么，但我认为这与模型未更新并向服务器发送新请求有关？

这是一个link 与一个工作版本的玩弄。

下面是一个简短的解释，并对您当前的代码进行更正。

首先，看看您如何在控制器中的这些操作中设置属性。您使用增量操作 += 这通常是正确的，除了因为您使用的是 ember，您必须使用 .set('property',value)：

//controllers/tasks.js
export default Ember.Controller.extend({
 queryParams:['page', 'limit'],
 page: 0,
 limit: 3,
 actions: {
   nextPage: function() {
     this.set('page',this.get('page') + 1)
   },
   previousPage: function() {
     this.set('page',this.get('page') - 1)
   }
 }
})

现在您的路线，随着查询参数的变化，您可能需要添加一些代码来刷新模型。查看指南here 了解更多信息。

//routes/tasks.js
export default Ember.Route.extend({
  queryParams: {
    page: {
      refreshModel: true
    }
  },
  model: function(params) {
    return this.store.query('task', {
      page: params.page,
      limit: params.limit
    });
  }
});

然后你的模板来显示任务：

//templates/tasks.hbs
<button {{action 'nextPage'}}>Next</button>
<button {{action 'previousPage'}}>Previous</button>
Current Page:{{page}}
<hr/>
Tasks: {{model.length}}
<hr/>
<ul>
{{#each model as |task|}}
    <li>{{task.title}}</li>
{{/each}}
</ul>