如何在EmberJS中处理ajax分页？ [英] How is ajax pagination handled in EmberJS?

问题描述

我更喜欢EmberJS，并开始开发REST应用程序。
目前我想在列出的项目上实现分页。我搜索了一下这个，似乎找不出最好的方法。

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

 导出默认Ember.Controller .extend（{
 queryParams：['page'，'size']，
 page：1，
 size：1，
 action：{
 nextPage：function （）{
 this.page + = 1; 
 //如何在这里检索数据
}，
 previousPage：function（）{
 this.pageNumber  - = 1; 
 //如何在这里检索数据？
} 
} 
}）
  

路由：在路由中执行此配置后，我可以将Ember URL中的分页参数传递给API URL参数。

 导出默认值Ember.Route.extend（{
 model：function（params）{
 return this.store.query（'task' ，{
 page：params.page，
 _end：params.size 
}）; 
} 
}）; 
  

即使在搜索引用数量之后，我仍然对如何将分页URL参数呈现到查看和如何将更改应用于分页。坦白说，我对整体概念本身有点困惑。

有关这方面的一点解释将非常有用。

解决方案

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

这是一个链接到一个工作版本的旋转。

短解释如下，修正您当前的代码。

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

  // controllers / tasks.js 
 export default Ember.Controller.extend（{
 queryParams：['page'，'limit']，
页面：0，
限制：3，
操作：{
 nextPage：function（）{
 this.set（'page'，this.get（'page' + 1）
}，
 previousPage：function（）{
 this.set（'page'，this.get（'page'） -  1）
} 
} 
}）
  

现在你的路线，你可能想添加一些代码刷新模型，随着查询参数的变化。有关更多信息，请参阅此处的指南。

  // routes / tasks.js 
导出默认值Ember.Route.extend（{
 queryParams：{
页面：{
 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'}}>上一个< / button> 
当前页面：{{page}} 
< hr /> 
任务：{{model.length}} 
< hr /> 
< ul> 
 {{#each model as | task |}} 
< li> {{task.title}}< / li> 
 {{/ each}} 
< / ul> 
  

I am a fresher to EmberJS and have started developing a REST application. Currently I want to implement pagination on my listed items. I searched around a bit regarding this and can't seem to figure out the best way to to it.

Controller: I have extracted the parameters in the ember URL using queryParams. Here, I can't figure out on how to apply the changed pagination values.

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 ?
   }
 }
})

Route: Following this configuration in my route, I was able to pass the pagination params in Ember URL to API URL parameters.

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

Even after searching through number of references I am still confused on how to present the pagination URL parameters into the view and how to apply the changes to pagination.

Frankly, I am a bit confused on the overall concept itself.

A little explanation regarding this would be greatly helpful.

解决方案

I'm not exactly sure what your problem is, but I think it's related to the model not updating and sending new requests to the server ?

Here is a link to a twiddle with a working version.

A short explanation follows, with corrections to your current code.

First, have a look at how you set properties in those actions in your controller. You use the increment operation += which normally would be correct, except because you're using ember, you'll have to use .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)
   }
 }
})

Now your route, you'll probably want to add some code to refresh the model, as the query parameters change. Have a look at the guides here for more info.

//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
    });
  }
});

And then your template to display the tasks:

//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分页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！