scroll infinito con brasa.js (carga perezosa)

He implementado un mecanismo de desplazamiento infinito en el GitHub Dashboard proyecto, actualmente estoy desarrollando. La característica se añade en commit 68d1728.

La idea básica es tener un LoadMoreView que invoque el método loadMore en el controlador cada vez que la vista sea visible en la ventana actual. Estoy usando el plugin jQuery inview para esto. Le permite registrarse para un evento inview, que se dispara cuando el elemento del selector especificado está visible en pantalla y cuando desaparece.

El controlador también tiene propiedades que indican si hay más elementos para cargar y si actualmente hay elementos recuperados. Estas propiedades se llaman canLoadMore y isLoading.

El LoadMoreView básicamente se ve así:

App.LoadMoreView = Ember.View.extend({
  templateName: 'loadMore',
  didInsertElement: function() {
    var view = this;
    this.$().bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
      if (isInView) Ember.tryInvoke(view.get('controller'), 'loadMore');
    });
  }
});

Donde la plantilla loadMore se define como sigue:

{{#if isLoading}}
    fetching some more stuff <img width="10" src="img/ajax-loader.gif" >
{{else}}
    {{#if canLoadMore}}
        <a {{action "loadMore" target="controller" }}>click to load more items</a>
    {{else}}
        <i>no more items</i>
    {{/if}}
{{/if}}

El controlador que maneja la obtención de más elementos se implementa de la siguiente manera. Tenga en cuenta que en el método loadMore una consulta en el almacén es realizado, que carga una página específica de entradas para un modelo.

App.EventsController = Ember.ArrayController.extend({
  currentPage: 1,

  canLoadMore: function() {
    // can we load more entries? In this example only 10 pages are possible to fetch ...
    return this.get('currentPage') < 10;
  }.property('currentPage'),

  loadMore: function() {
    if (this.get('canLoadMore')) {
      this.set('isLoading', true);
      var page = this.incrementProperty('currentPage');

      // findQuery triggers somehing like /events?page=6 and this
      // will load more models of type App.Event into the store
      this.get('store').findQuery(App.Event, { page: page });
    } else {
      this.set('isLoading', false);
    }
  }
});

Lo único que queda es establecer inicialmente el content del controlador al resultado de una función filter, por lo que el content se actualiza cuando se cargan nuevos modelos en la tienda (lo que sucede debido al método findQuery en el loadMore del controlador). Además, se añade un hash query cuando se invoca el filter. Esto garantiza que se realice una consulta inicial al servidor.

App.eventsController = App.EventsController.create({
    content: []
});

var events = App.store.filter(App.Event, { page: 1 }, function(data) {
    // show all events; return false if a specific model - for example a specific
    // type of event - shall not be included
    return true;
});

Estoy escribiendo un plugin de paginación infinita para Ember basado en el trabajo de @pangratz.

Por favor, dispara cualquier problema allí si tienes preguntas o mejoras que te gustaría.

Recomendaría usar el complemento Ember Infinity. Es compatible con Ember 1.10 hasta 2.0+. Es relativamente fácil de configurar. Solo necesitas modificar tu ruta y plantilla.

Ruta (Product es el modelo de ejemplo):

import InfinityRoute from 'ember-infinity/mixins/route';

export default Ember.Route.extend(InfinityRoute, {
  model() {
    /* Load pages of the Product Model, starting from page 1, in groups of 12. */
    return this.infinityModel('product', { perPage: 12, startingPage: 1 });
  }
});

Plantilla:

{{#each model as |product|}}
  ...
{{/each}}

{{infinity-loader infinityModel=model}}

Cuando el componente {{infinity-loader}} se hace visible, envía una acción a su ruta, por lo que sabe actualizar la matriz del modelo con nuevos registros (obtenidos).

La primera solicitud se enviará a:

/products?per_page=12&page=1

Así que también necesita para preparar su API de backend para manejar estos parámetros de consulta. Obviamente es personalizable, echa un vistazo a Sección de Uso avanzado de Readme.

Nota:

Ambos usando ListView (respuesta de@commadelimited) y vistas con ArrayController (respuesta de@pangratz) está obsoleto/eliminado a partir de Ember 2.0 siendo la versión estable.