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

Methods

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.