ember-cli-infinite-scroll

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.