0_route.js

import Ember from 'ember';

export default Ember.Route.extend({
  // Here, we're telling ember to "watch" the query parameter "page".
  // In this case, if the parameter changes, the model will be fetched again.
  // We could map the parameter to a different property name if we wanted.
  queryParams: {
    page: {
      refreshModel: true
    }
  },
  model: function(params) {
    var query = {};

    // If the query parameter "page" is present, we're relaying it to ember data.
    // Note: we could also include other parameters, eg. "perPage", if the API handles it.
    if(Ember.isPresent(params.page)) {
      query.page = params.page;
    }

    return this.get('store').find('post', query);
  },
  // Here, we're passing metadata to the controller - namely, the total number of pages.
  // This method will be executed each time the model is reloaded.
  setupController: function(controller, model) {
    this._super.apply(this, arguments); // Do not forget this call

    controller.set('totalPages', model.get('meta.totalPages'));
  }
});

1_controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  // Here, we're telling the controller that the property `page`
  // should be "bound" to the query parameter the same name.
  // We could map the parameter to a different property name if we wanted.
  queryParams: [
    'page',
  ],

  // The default value for our page property
  page: 1,

  // This property will be set by the parent route
  totalPages: null,

  // The following properties will be used for the display of the pagination links
  prevPage: function() {
    return this.get('page') - 1;
  }.property('page'),

  nextPage: function() {
    return this.get('page') + 1;
  }.property('page'),

  isFirstPage: function() {
    return this.get('page') === 1;
  }.property('page'),

  isLastPage: function() {
    return this.get('page') >= this.get('totalPages');
  }.property('page', 'totalPages'),

  pageRange: function () {
    var result = Ember.A();

    for(var i = 1; i <= this.get('totalPages'); i++) {
      result.push(i);
    }

    return result;
  }.property('totalPages')
});

2_template.hbs

{{!-- Our template goes here... --}}

<div class="pagination">
  {{!-- If we're on the first page, do not display the link --}}
  {{#if isFirstPage}}
    <a href="#">Previous</a>
  {{else}}
    {{#link-to (query-params page=prevPage)}}Previous{{/link-to}}
  {{/if}}

  {{!--
    For each page, display a link leading to it.
    We could be smart and disable the link for the current page,
    just like we're doing for the "previous"/"next" links.
  --}}
  {{#each num in pageRange}}
    {{#link-to (query-params page=num)}}{{num}}{{/link-to}}
  {{/each}}

  {{!-- If we're on the last page, do not display the link --}}
  {{#if isLastPage}}
    <a href="#">Next</a>
  {{else}}
    {{#link-to (query-params page=nextPage)}}Next{{/link-to}}
  {{/if}}
</div>