ember-cli-infinite-scroll

Demo at http://vestorly.github.io/ember-cli-infinite-scroll

Most Ember data adapters perform data fetches in a single query. This can be problematic for data transfer and rendering. If a user never views the content, it can also put unnecessary strain on an app.

ember-cli-infinite-scroll is an ember-cli addon that can be used as a mixin or a component. By default it issues ember data queries using 'start' and 'limit', incrementing each time a query is made.

Advanced features include dynamically calculating query params, pre- and post-query processing methods, and state properties in components and controllers for display of loading spinners and end-of-content messages.

Installation

Since this addon uses ember-ic-you, make sure you have it properly installed: https://github.com/Vestorly/ember-ic-you
Install addon ember install ember-cli-infinite-scroll

As a component

Use infinite-scroll-container as a self-contained component. Specify the name of the model that will be queried as infiniteModelName.

{{infinite-scroll-container infiniteModelName='post'}}

As a controller/component mixin

Use mixins/infinite-scroll in a controller or component.

import Ember from 'ember';
import InfiniteScrollMixin from 'ember-cli-infinite-scroll/mixins/infinite-scroll';

export default Ember.Controller.extend(InfiniteScrollMixin, {
  startContentQuery() {
    this.infiniteQuery('post');
  }
});

In the template, use the infinite-scroll component at the bottom of the infinite content.

{{#each model as |post|}}
  {{post.title}}
{{/each}}
{{infinite-scroll}}

As a route mixin

Use mixins/infinite-scroll-route in a route.

import Ember from 'ember';
import InfiniteScrollRouteMixin from 'ember-cli-infinite-scroll/mixins/infinite-scroll-route';

export default Ember.Route.extend(InfiniteScrollRouteMixin, {
  model() {
    return this.infiniteQuery('post', { popular: true });
  }
});

In the template, use the infinite-scroll component at the bottom of the infinite content.

{{#each model as |post|}}
  {{post.title}}
{{/each}}
{{infinite-scroll}}

Controllers (and in the future, routable components), have access to infiniteScrollAvailable, hasMoreContent, and infiniteQuerying, which can be used in templates.

Properties

Property	Default	Description
`infiniteQuerying`	`false`	True when a query is in progress.
`infiniteScrollAvailable`	`true`	True if the infinite query can be triggered
`hasMoreContent`	`true`	True if it expects to find more content with another query
`infiniteIncrementProperty`	`'start'`	The name of the property that will be incremented with each query
`infiniteIncrementBy`	`'limit'`	The name of the property that will increment `infiniteIncrementProperty`
`infiniteContentPropertyName`	`'model'`	The name of the property that the records will be added to.
`infiniteModelName`	`''`	The name of the model that will be queried
`infiniteQueryParams`	`[]`	Name of params that will be sent with each query, in addition to `infiniteIncrementProperty` and `infiniteIncrementBy`

Methods

Method	Params	Description
`infiniteQuery`	`modelName`, `params`	Calls `beforeInfiniteQuery`, `infiniteQuery` and `afterInfiniteQuery`. If passed `modelName`, sets `infiniteModelName`. If passed `params`, sets `infiniteQueryParams`.
`beforeInfiniteQuery`	`params`	Called before the query. `params` are the params to be used in the query
`infiniteDataQuery`	`modelName`, `params`	Performs the query with a model name and params
`afterInfiniteQuery`	`newRecords`	Adds the new records to the current collection
`updateHasMoreContent`	`addedLength`	If `addedLength` is 0, sets `hasMoreContent` to `false`
`resetInfinite`		Resets the `infiniteScrollAvailable`, `hasMoreContent`, and the data represented by `infiniteIncrementProperty`, and `infiniteModelName`

Examples

Dynamic Query Params

infiniteModelName: 'post',

infiniteQueryParams: ['recent'],

limit: Ember.computed('isMobile', function() {
  if(this.get('isMobile')) {
    return 4;
  }

  return 10;
})

actions: {
  toggleRecent: function() {
    this.toggleProperty('recent');
  }
}

Process Records After Query

afterInfiniteQuery(newRecords) {
newRecords.setEach('popular', true);
return this._super(newRecords); // adds records to the model
}

Turn Off Infinite Scroll Every 100 Records

afterInfiniteQuery(newRecords) {
  let currentCount = this.get('currentCount') + newRecords.get('length');

  if(currentCount > 100) {
    this.set('infiniteScrollAvailable', false);
    this.set('currentCount', 0);
  } else {
    set('currentCount', currentCount);
  }

  return this._super(...arguments);
},

actions: {
  turnOnInfiniteScroll: {
    this.set('infiniteScrollAvailable', true);
  }
}

Template:

{{#unless infiniteScrollAvailable}}
  <button {{action 'turnOnInfiniteScroll'}}>Show More</button>
{{/unless}}

Add an End-of-Content Message

{{#unless hasMoreContent}}
  You're at the end of the line.
{{/unless}}

###Other Resources

Ember Infinity is a great addon that works with the Rails Kaminari Gem.

FMGSuite/ember-cli-infinite-scroll