Ember-Impagination

controllers.application.js

import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  fetch: function(pageOffset, pageSize, stats) {
    return $.ajax({ url: `/colors?page=pageOffset` }).then((response) => {
      stats.totalPages = response.meta.total_pages;
      return response.colors;
    });
  },

  'timeout-ms': 5,

  setReadOffset: task(function * (dataset, offset) {
    yield timeout(this.get('timeout-ms'));
    console.log('setReadOffset', offset);
    dataset.setReadOffset(offset);
  }).restartable(),

  actions: {
    onObjectAt(dataset, index) {
      this.get('setReadOffset').perform(dataset, index);
    }
  }
});

router.js

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

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
    model: function() {
    var items = [];
    for (var i = 0; i < 10; i++) {
      items.push({name: "Item " + i});
    }
    return items;
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
{{#impagination-dataset
   fetch=fetch
   on-object-at=(action "onObjectAt")
   load-horizon=30
   page-size=10
   as |records|}}

  {{#ember-collection
     items=records
     estimated-height=500px
     estimated-width=600px
     cell-layout=(fixed-grid-layout 500 70)
     as |record index|}}

    {{#color-block record.content.hsl}} Record {{index}} {{/color-block}}

  {{/ember-collection}}

{{/impagination-dataset}}

twiddle.json

{
  "version": "0.12.1",
  "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",
    "impagination": "1.0.0-alpha.3"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-impagination": "0.2.1",
    "ember-collection": "v1.0.0-alpha.7",
    "ember-concurrency": "0.8.1",
  }
}