infinite scroll with ember.js (lazy loading)

Question

I have a view where there can be a large number of items for the user to scroll through and I\'d like to implement infinite scrolling to enable progressive loading of the co

Answer 1

I would recommend using Ember Infinity addon. It supports Ember 1.10 through to 2.0+. It's relatively easy to setup. You only need to modify your route and template.

Route (Product is example model):

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 });
  }
});

Template:

{{#each model as |product|}}
  ...
{{/each}}

{{infinity-loader infinityModel=model}}

When {{infinity-loader}} component becomes visible it sends an action to your route, so it knows to update model array with new (fetched) records.

First request will be sent to:

/products?per_page=12&page=1

So you also need to prepare your backend API to handle these query params. It's obviously customizable, take a look at Advanced Usage section of Readme.

Note:

Both using ListView (@commadelimited's answer) and views with ArrayController (@pangratz's answer) is deprecated/removed as of Ember 2.0 being stable version.