Ember Infinity

Demo: hhff.github.io/ember-infinity/

Simple, flexible infinite scrolling for Ember CLI Apps. Works out of the box with the Kaminari Gem.

Inspired by @bantic's Ember Infinite Scroll repo, but without using controllers, in preparation for Ember 2.0.

Installation

ember install ember-infinity

Basic Usage

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

export default Ember.Route.extend(InfinityRoute, {
  model() {
    /* Load pages of the Product Model, starting from page 1, in groups of 12. */
    return this.infinityModel("product", { perPage: 12, startingPage: 1 });
  }
});

Then, you'll need to add the Infinity Loader component to your template, like so:

{{#each model as |product|}}
  <h1>{{product.name}}</h1>
  <h2>{{product.description}}</h2>
{{/each}}

{{infinity-loader infinityModel=model}}

Now, whenever the infinity-loader is in view, it will send an action to the route (the one where you initialized the infinityModel) to start loading the next page.

When the new records are loaded, they will automatically be pushed into the Model array.

Advanced Usage

JSON Request/Response Customization

By default, ember-infinity will send pagination parameters as part of a GET request as follows

/items?per_page=5&page=1

and will expect to recieve metadata in the response payload via a total_pages param in a meta object

{
  items: [
    {id: 1, name: 'Test'},
    {id: 2, name: 'Test 2'}
  ],
  meta: {
    total_pages: 3
  }
}

If you wish to customize some aspects of the JSON contract for pagination, you may do so via your routes. For example:

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

export default Ember.Route.extend(InfinityRoute, {
  
  perPageParam: "per",              // instead of "per_page"
  pageParam: "pg",                  // instead of "page"
  totalPagesParam: "meta.total",    // instead of "meta.total_pages"

  model() {
    /* Load pages of the Product Model, starting from page 1, in groups of 12. */
    return this.infinityModel("product", { perPage: 12, startingPage: 1 });
  }
});

This will result in request query params being sent out as follows

/items?per=5&pg=1

and ember-infinity will be set up to parse the total number of pages from a JSON response like this:

{
  items: [
    ...
  ],
  meta: {
    total: 3
  }
}

infinityModel

You can also provide additional parameters to infinityModel that will be passed to your backend server in addition to the pagination params. For instance, in the following example a category parameter is added:

return this.infinityModel("product", { perPage: 12, startingPage: 1,
                                       category: "furniture" });

• modelPath

modelPath is optional parameter for situations when you are overriding setupController or when your model is on different location than controller.model.

model: function() {
  return this.infinityModel("product", {
    perPage: 12,
    startingPage: 1,
    modelPath: 'controller.products'
  });
},
setupController: function(controller, model) {
  controller.set('products', model);
}

infinity-loader

The infinity-loader component as some extra options to make working with it easy!

• destroyOnInfinity

{{infinity-loader infinityModel=model destroyOnInfinity=true}}

Now, when the Infinity Model is fully loaded, the infinity-loader will remove itself from the page.

• developmentMode

{{infinity-loader infinityModel=model developmentMode=true}}

This simply stops the infinity-loader from fetching triggering loads, so that you can work on its appearance.

• loadingText & loadedText

{{infinity-loader infinityModel=model loadingText="Loading..." loadedText="Loaded!"}}

By default, the infinity-loader will just output a span showing its status.

• reached-infinity Class Name

.infinity-loader {
  background-color: wheat;
  &.reached-infinity {
    background-color: lavender;
  }
}

When the Infinity Model loads entirely, the reached-infinity class is added to the component.

• infinity-template Generator

ember generate infinity-template

Will install the default infinity-loader template into your host app, at app/templates/components/infinity-loader.

• scrollable

{{infinity-loader scrollable="#content"}}

You can optionally pass in a jQuery style selector string. If it's not a string, scrollable will default to using the window for the scroll binding.