so#43570060

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

mirage.common.util.js

function parseRequest(request) {
  let sub = request.substring('/dummies?page='.length);
  let page = parseInt(sub.substring(0, sub.indexOf('&')));
  let sub2 = request.substring(request.indexOf('per_page='));
  let pageSize= parseInt(sub2.substring('per_page='.length));
  return {page: page, pageSize: pageSize};
}

export default {ITEM_SIZE: 100, parseRequest: parseRequest};

mirage.config.js

import Util from './common/util';

export default function() {
  //window.server = this;
  this.get('dummies', (schema, request)=> {
    let json = Util.parseRequest(request.url);
   	let page = json.page;
    let pageSize= json.pageSize;
   	let startIndex = (page - 1) * pageSize;
    let endIndex = startIndex + pageSize;
    return schema.dummies.all().slice(startIndex, endIndex);
  });
  
  /*this.get('localhost/dummies?page=1&per_page=12', (schema)=> {
    return schema.dummies.all();
  });*/
};

mirage.factories.dummy.js

import { Factory } from 'ember-cli-mirage';

export default Factory.extend({
  name(i) { return `Name ${i}`; },
});

mirage.models.dummy.js

import { Model } from 'ember-cli-mirage';

export default Model.extend({
});

mirage.scenarios.default.js

import Util from '../common/util';

export default function(server) {
  server.createList('dummy', Util.ITEM_SIZE);
}

mirage.serializers.application.js

import { JSONAPISerializer } from 'ember-cli-mirage';
import Util from '../common/util';

export default JSONAPISerializer.extend({
  serialize(object, request) {
    let pageSize = Util.parseRequest(request.url).pageSize;
    let totalSize = Util.ITEM_SIZE;
    let pageCount = totalSize / pageSize | 0 + 1;
    let json = JSONAPISerializer.prototype.serialize.apply(this, arguments);
    json['meta'] = {total_pages : pageCount};
    return json;
  }
});

models.dummy.js

import Model from "ember-data/model";
import DS from 'ember-data';

export default Model.extend({
    name: DS.attr()
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});
Router.map(function() {
  this.route('dummy-route');
});

export default Router;

routes.dummy-route.js

import Ember from 'ember';
import InfinityRoute from "ember-infinity/mixins/route";

export default Ember.Route.extend(InfinityRoute, {
  model() {
    /* Load pages of the dummy Model, starting from page 1, in groups of 12. */
    let inifinityModel = this.infinityModel("dummy", { perPage: 12, startingPage: 1});
    return inifinityModel;
  },
  
  actions: {
    makeInfinityRemoteCall() {
      // now update the infinityModel to reflect the changes!!!
      // page at 4 will just be appended to the existing model
       this.infinityModel("dummy", { perPage: 12, startingPage:5}).then((myModel)=>this.set('controller.model',myModel));
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}

<br>
{{#link-to 'dummy-route'}}dummy route{{/link-to}}
<br>
<br>

templates.dummy-route.hbs

<br>
<button onclick={{route-action 'makeInfinityRemoteCall'}}>Make infinity remote call for page 4 via button click</button>
<br>

{{#each model as |item|}}
	{{item.name}}<br>
{{/each}}


{{infinity-loader infinityModel=model}}

twiddle.json

{
  "version": "0.12.1",
  "ENV": {
  	"ember-cli-mirage": {
    	"enabled": true
    }
  },
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-infinity": "0.2.8",
    "ember-cli-mirage": "0.3.1",
    "ember-route-action-helper": "2.0.2"
  }
}