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!