How is ajax pagination handled in EmberJS?

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>