бесконечная прокрутка с ember.js (ленивая загрузка)

Вы знали о недавно выпущенном компоненте Ember.ListView?

https://github.com/emberjs/list-view

Об этом было объявлено на февральской встрече Ember в Сан-Франциско. Вот слайд-шоу от Эрика Брина, одного из разработчиков Ember Core, о его использовании:

http://talks.erikbryn.com/ember-list-view/

Я реализовал механизм бесконечной прокрутки в GitHub Dashboard проекте, который я сейчас разрабатываю. Эта функция добавлена ​​в коммит 68d1728.

Основная идея состоит в том, чтобы иметь LoadMoreView, который вызывает метод loadMore на контроллере каждый раз, когда представление отображается в текущем окне просмотра. Для этого я использую подключаемый модуль jQuery inview. Он позволяет вам зарегистрироваться для inview события, которое запускается, когда элемент указанного селектора отображается на экране и когда он исчезает.

Контроллер также имеет свойства, которые указывают, есть ли еще элементы для загрузки и есть ли в данный момент выбранные элементы. Эти свойства называются canLoadMore и isLoading.

LoadMoreView в основном выглядит так:

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

где шаблон loadMore определяется следующим образом:

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

Контроллер, который обрабатывает выборку дополнительных элементов, реализуется следующим образом. Обратите внимание, что в методе loadMore выполняется запрос к хранилищу, который загружает определенную страницу записей для модели.

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

Осталось только изначально установить content контроллера на результат функции filter, поэтому content обновляется, когда новые модели загружаются в хранилище (что происходит из-за метода findQuery в loadMore контроллера). Кроме того, хэш query добавляется при вызове filter. Это гарантирует выполнение первоначального запроса к серверу.

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

Я пишу плагин бесконечной разбивки на страницы для Ember на основе работы @pangratz.

Пожалуйста, сообщите о любых проблемах, если у вас есть вопросы или улучшения, которые вам нужны.

Я бы рекомендовал использовать надстройку Ember Infinity. Он поддерживает Ember с 1.10 по 2.0+. Его относительно легко настроить. Вам нужно только изменить свой маршрут и шаблон.

Маршрут (Product пример модели):

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

Шаблон:

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

{{infinity-loader infinityModel=model}}

Когда компонент {{infinity-loader}} становится видимым, он отправляет действие на ваш маршрут, поэтому он знает, что нужно обновить массив модели новыми (извлеченными) записями.

Первый запрос будет отправлен по адресу:

/products?per_page=12&page=1

Таким образом, вам также необходимо подготовить свой серверный API для обработки этих параметров запроса. Очевидно, что его можно настроить. Взгляните на раздел "Расширенное использование" в Readme.

Примечание.

Как использование ListView (ответ @ commadelimited), так и представления с ArrayController (ответ @ pangratz) устарели / удалены, поскольку Ember 2.0 является стабильной версией.