бесконечный свиток с угольком.js (ленивая загрузка)

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

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

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

The 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 контроллера к результату a

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

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

Я бы рекомендовал использовать Эмбер Бесконечность аддон. он поддерживает Эмбер 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, являющейся стабильной версией.