ember.js 无限滚动（延迟加载）

Question

我有一个视图，其中可以有大量项目供用户滚动浏览，我想实现无限滚动以实现内容的渐进式加载。

看起来有些人 have done pagination 但 Google 并没有提出任何人讨论他们如何使用 Ember/Ember Data 完成无限列表。有人已经解决了这个问题并有一篇博文/示例代码可以分享吗？

Answer 1

我建议使用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 来处理这些查询参数。显然是可定制的，看看Advanced Usage section of Readme。

注意：

使用 ListView（@commadelimited 的回答）和使用 ArrayController（@pangratz 的回答）的视图都已弃用/删除，因为 Ember 2.0 是稳定版本。

Answer 2

我正在根据@pangratz 的工作编写infinite pagination plugin for Ember。

如果您有任何问题或需要改进，请在此处提出任何问题。

Answer 3

你知道新发布的 Ember.ListView 组件吗？

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

它是在 2 月的旧金山 Ember 聚会上宣布的。下面是来自 Ember Core 开发人员之一的 Erik Bryn 关于使用它的幻灯片：

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

Answer 4

我已经在GitHub Dashboard project 实现了无限滚动机制，我目前正在开发中。该功能在提交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 会在新模型加载到商店时更新（这是由于@ 987654341@ 方法在控制器的loadMore 中）。此外，在调用 filter 时会添加 query 哈希。这可确保对服务器进行初始查询。

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