Pagination

adapters.application.js

import ActiveModelAdapter from 'active-model-adapter';

export default ActiveModelAdapter.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({

});

mirage.config.js

export default function() {
  window.server = this;

  this.get('/posts', function(schema, request){
    let { page } = request.queryParams;
    if (page) {
    	page = parseInt(page);
    } else {
      page = 1;
    }
    
    let posts = [
      { id: 1, author: 'Jane Eyre' }, 
      { id: 2, author: 'Emily Dickinson' },
      { id: 3, author: 'Mark Twain' }, 
      { id: 4, author: 'J.K. Rowling' },
      { id: 5, author: 'Maya Angelou' }, 
      { id: 6, author: 'Stephen King' },
      { id: 7, author: 'C.S. Lewis' }, 
      { id: 8, author: 'J.R.R. Tolkein' }
    ];
    
    if (page > 4) {
    	throw("There are not more than 4 pages");
    } else {
    	let arrays = [], size = 2;

      while (posts.length > 0)
          arrays.push(posts.splice(0, size));

      return { posts: arrays[page - 1], meta: {total: 4, page: page} }
    }
    
  });
};

models.post.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  author: attr('string')
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.query('post', { page: 1 });
  }
});

serializers.application.js

export { ActiveModelSerializer as default } from 'active-model-adapter';

templates.application.hbs

<header>
  <h1>Posts</h1>
</header>

<ul>
{{#each model as |post|}}
	<li>{{post.author}}</li>
{{/each}}
</ul>

<button>Back</button>
	Page {{model.meta.page}} of {{model.meta.total}}
<button>Next</button>

twiddle.json

{
  "version": "0.15.0",
  "ENV": {
    "ember-cli-mirage": {
      "enabled": true
    }
  },
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
  	"active-model-adapter": "2.2.0",
  	"ember-cli-mirage": "0.4.9",
    "ember-data": "3.2.0",
    "ember-truth-helpers": "2.1.0"
  }
}