无限滚动与ember.js(延迟加载)

Question

我有一个视图,其中可以有大量的项目供用户滚动,我想实现无限滚动以启用内容的渐进加载.

看起来有些人已经完成了分页,但谷歌没有提出任何讨论他们如何使用Ember/Ember Data完成无限列表的人.任何人都已经完成了这个并有一个博客文章/示例代码分享？

Answer 1

我实现了在一个无限滚动机制GitHub Dashboard 项目,我目前正在开发.该功能在commit 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;
});

Answer 2

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

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

它在2月旧金山Ember Meetup上宣布.这是Erik Bryn的一个幻灯片,Erik Bryn是Ember Core开发人员之一,使用它:

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

Answer 3

我正根据@ pangratz的作品为Ember写一个无限的分页插件.

如果您有任何疑问或改进,请在那里解决任何问题.