nieskończony zwój z ember.js (lazy loading)

Zaimplementowałem mechanizm nieskończonego przewijania w GitHub Dashboard projekt , obecnie rozwijam. Funkcja jest dodawana w commit 68d1728 .

Podstawową ideą jest posiadanie LoadMoreView, która wywołuje metodę loadMore na kontrolerze za każdym razem, gdy widok jest widoczny na bieżącym widoku. Używam do tego wtyczki jQuery inview. Pozwala na zarejestrowanie zdarzenia inview, które jest wywoływane, gdy element określonego selektora jest widoczny na ekran i kiedy zniknie.

Kontroler posiada również właściwości, które wskazują, czy jest więcej elementów do załadowania i czy są aktualnie pobierane. Właściwości te nazywane są canLoadMore i isLoading.

LoadMoreView W zasadzie wygląda tak:

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

Gdzie loadMore szablon jest zdefiniowany w następujący sposób:

{{#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}}

Kontroler, który obsługuje pobieranie większej ilości elementów, jest zaimplementowany w następujący sposób. Zauważ, że w metodzie loadMore zapytanie w Sklepie jest wykonywany, który ładuje określoną stronę wpisów dla modelu.

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

Pozostało tylko, aby wstępnie ustawić content kontrolera na wynik filter funkcji, więc {[13] } jest aktualizowany, gdy nowe modele są ładowane do sklepu(co dzieje się dzięki metodzie findQuery w loadMore kontrolera). Ponadto, przy wywołaniu filter dodawany jest skrót query. Zapewnia to wykonanie wstępnego zapytania do serwera.

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

Piszę infinite pagination plugin dla Ember na podstawie pracy @ pangratz.

Proszę odpalić wszelkie problemy tam, jeśli masz pytania lub ulepszenia, które chcesz.

Polecam użycie Ember Infinity addon. obsługuje Ember 1.10 do 2.0+. jest stosunkowo łatwy w konfiguracji. Wystarczy tylko zmodyfikować trasę i szablon.

Route (Product to przykładowy model):

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

Szablon:

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

{{infinity-loader infinityModel=model}}

Kiedy {{infinity-loader}} komponent staje się widoczny wysyła akcję na Twoją trasę, dzięki czemu wie, aby zaktualizować tablicę modelu o nowe (pobrane) rekordy.

Pierwszy wniosek zostanie przesłany na adres:

/products?per_page=12&page=1

Więc potrzebujesz też aby przygotować API zaplecza do obsługi tych parmów zapytań. Jest oczywiście konfigurowalny, spójrz na sekcja Advanced Usage Readme .

Uwaga:

Zarówno używanie ListView (odpowiedź@commadelimited), jak i widoków z ArrayController (odpowiedź@pangratz) jest przestarzałe/usunięte od wersji stabilnej Ember 2.0.