ragnarpeterson/ember-infinite-scroll

Infinite scroll for your Ember app

ember-infinite-scroll's Issues

Can't get this working

I have added the component to the page:

        {{#infinite-scroll content=tasks hasMore=fetchMore}}
            <span>Loading...</span>
        {{/infinite-scroll}}

But when I scroll nothing happens. I also added a button:

<button type="button" class="btn" {{action fetchMore}}>More</button>

And this updaes the result set correctly. Any ideas why the plugin is not working for me?

possible mixin go-with

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

Tests

Hey, do u plan to include some tests ? Thanks.

Allow scrollable element to be configured.

Jason,

Do you have any plans, or can you suggest a way, to configured the scrollable element? It's currently set to the window. However, I need to have a scrollable element that is a div within the page. It's actually quite close to working as is, but it does not work in IE 11. When I scroll my scrollable element in Chrome, the whole page "attempts" to scroll slightly, and I think that's why it is working in Chrome. However, IE 11 doesn't have that same behavior; the window/page doesn't move at all. I think being able to specify the scrollable element would be a nice addition, and would probably solve this problem.

Thanks,

TR

Assertion Failed: calling set on destroyed object

When I first enter the route with the ember-infinite-scoll component. everything works fine. When I leave the route and return, I start getting the error below and can no longer use the scroll functionality.

Uncaught Error: Assertion Failed: calling set on destroyed object
vendor.js:16896 Ember.assertvendor.js:30008 setvendor.js:44306 __exports__.default.Mixin.create.setember-infinite-scroll/components/infinite-scroll.js:30 __exports__.default.Em.Component.extend.didScrollvendor.js:13372 Backburner.runvendor.js:31556 applyvendor.js:30173 runvendor.js:31556 applyvendor.js:30215 run.joinvendor.js:31556 applyvendor.js:30267 run.bindvendor.js:4759 jQuery.event.dispatchvendor.js:4427 jQuery.event.add.elemData.handle

Any ideas why?