Pergaminho Infinito básico de Emberjs

Não encontrei muitas bibliotecas básicas de rolagem infinita que funcionem bem com o Ember. Abaixo está um componente muito simples que os pais podem vincular à loadMorepropriedade e ser acionado quando estiver próximo ao final da tela.

NOTA: não testei isso no celular ainda.

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

Então, no hbs que deseja usar, faça:

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

 <li></li>...

{{/infinite-scroll}}

Então note que eu abstraia o tagNameatributo para que você possa usá-lo para ulou tbodyetc.

Então, em seu controlador:

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