Emberjs basic Infinite scroll

I have not found many basic infinite scroll library that works well with Ember. Below is a very simple component that parents can bind to the loadMore property get fired when is close to the end of the screen.

NOTE: have not tested this on mobile yet.

export default Em.Component.extend({
  loadMore: false,
  didInsertElement: function(){
    var lastScrollTop = 0;
    var _scope = this;
    $(window).scroll(function() {
      var st = $(this).scrollTop();
      if (st > lastScrollTop){
        if($(window).scrollTop() + $(window).height() >  $(document).height() - 100) {
          _scope.set('loadMore', true);
        }
      }
      lastScrollTop = st;
    });
  }
});

Then in the hbs you want to use this you do:

{{#infinite-scroll tagName='ul' loadMore=loadMore}}

 <li></li>...

{{/infinite-scroll}}

So notice I abstracted out the tagName attribute so you can use it for ul or tbody etc

Then in your controller:

export default Em.ObjectController.extend({
    loadMore: false,
    obsLoadMore: function(){
        //do what you need to do to loadMore
    }.observes('loadMore')
});