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网址参数。

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（＆＃39; property＆＃39;，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>

如何在EmberJS中处理ajax分页？

1 个答案: