ragnarpeterson/ember-infinite-scroll

possible mixin go-with

SirZach opened this issue · 4 comments

First off, just wanted to say thanks a lot for this gem! I ended up creating a mixin to go alongside it since I didn't actually need to asynchronously request more data. I'm posting it here in case you have any suggestions or want to incorporate it somehow.

import Ember from 'ember';

export default Ember.Mixin.create({
  /** The number of items to add to the page when you scroll down to the bottom **/
  chunkSize: 5,

  /** The array you should iterate over **/
  iterable: [],

  /**
   * You should implement this method to look something like this...
   * repopulateIterable: function () {
      this._super();

      this.get('iterable').pushObjects(this.get('metrics').slice(0, this.get('chunkSize'))); //hydrating iterable when the model you care about changes
    }.observes('metrics.[]'),
   */
  repopulateIterable: function () {
    this.set('iterable', []);
  },

  /**
   * Returns the array of data to be added to iterable, wrapped in a Promise
   * @param model
   * @returns {RSVP.Promise}
   */
  populateIterable: function (model) {
    var chunkSize = this.get('chunkSize'),
      iterableLength = this.get('iterable.length'),
      newData = model.slice(iterableLength, iterableLength + chunkSize);

    var promise = new Ember.RSVP.Promise(function (resolve, reject) {
      Ember.run(null, resolve, newData);
    });

    return promise;
  },

  /**
   * Return true if there are still more items to add to iterable
   * When false ember-infinite-scroll will no longer try to add more items to iterable
   */
  hasMore: function () {
    return this.get('iterable.length') < this.get('model.length');
  }.property('iterable.[]', 'model.[]'),

  actions: {
    fetchMore: function (callback) {
      var model = this.get('model');
      var promise = this.populateIterable(model);
      callback(promise);
    }
  }
});

Thanks for this Zach! It looks great and makes a lot of sense to me. I want to keep ember-infinite-scroll as simple as possible so I don't think it makes sense to add this to the project itself. However, if you want to wrap this up as its own addon, I'd love to add a reference to it in the readme. I could also just add a link to this issue if you don't want to do that. Let me know what you think.

I think adding a link in the README would be just fine instead of polluting the addon space. Thanks!

Oh, I forgot that I tweaked one of the methods in the mixin to work better.

  /**
   * Returns the array of data to be added to iterable, wrapped in a Promise
   * @param model
   * @returns {RSVP.Promise}
   */
  populateIterable: function (model) {
    var chunkSize = this.get('chunkSize'),
      iterableLength = this.get('iterable.length'),
      newData = model.slice(iterableLength, iterableLength + chunkSize);

    var promise = new Ember.RSVP.Promise(function (resolve, reject) {
      Ember.run(null, resolve, newData);
    });

    return promise;
  },

Awesome. Just added a link in the README. Thanks again Zach!