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 à loadMore
propriedade 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 tagName
atributo para que você possa usá-lo para ul
ou tbody
etc.
Então, em seu controlador:
export default Em.ObjectController.extend({
loadMore: false,
obsLoadMore: function(){
//do what you need to do to loadMore
}.observes('loadMore')
});