Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

possible mixin go-with #5

Closed
SirZach opened this issue Feb 3, 2015 · 4 comments
Closed

possible mixin go-with #5

SirZach opened this issue Feb 3, 2015 · 4 comments

Comments

@SirZach
Copy link

SirZach commented Feb 3, 2015

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);
    }
  }
});
@jasonkriss
Copy link
Collaborator

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.

@SirZach
Copy link
Author

SirZach commented Feb 4, 2015

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

@SirZach SirZach closed this as completed Feb 4, 2015
@SirZach
Copy link
Author

SirZach commented Feb 4, 2015

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

@jasonkriss
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants