An ember addon with mixins and components for infinite scrolling content
CSS JavaScript HTML
Latest commit e659723 Jan 10, 2017 @JeffLuong JeffLuong Update README.md
Permalink
Failed to load latest commit information.
addon Remove deprecated Ember.K Dec 31, 2016
app/components add infinite scroll container component Sep 22, 2015
blueprints deprecation updates for ember 1.13 Apr 18, 2016
config
tests [BUGFIX] returning undefined from infiniteQuery Aug 5, 2016
.bowerrc Initial Commit from Ember CLI v0.1.2 Oct 22, 2014
.editorconfig Initial Commit from Ember CLI v0.1.2 Oct 22, 2014
.ember-cli Initial Commit from Ember CLI v0.1.2 Oct 22, 2014
.gitignore add resetInfinite() method May 16, 2016
.jshintrc
.npmignore
LICENSE.md Update LICENSE.md Dec 1, 2015
README.md
bower.json
circle.yml change from travis to circleci Sep 29, 2015
ember-cli-build.js deprecation updates for ember 1.13 Apr 18, 2016
index.js upgrade ember Sep 21, 2015
package.json bump version Aug 5, 2016
testem.json deprecation updates for ember 1.13 Apr 18, 2016

README.md

ember-cli-infinite-scroll Master Build Status

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


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.