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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (62)

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

看起来有些人已经完成了分页,但Google并没有提供任何人讨论他们如何使用Ember / Ember Data完成无限列表。

提问于
用户回答回答于
用户回答回答于

我实现了在一个无限滚动机制GitHub Dashboard 项目,我目前正在开发。该功能添加到提交68d1728。

控制器还具有属性,用于指示是否有更多项目要加载,以及是否有当前项目被提取。这些属性被称为canLoadMoreisLoading

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

所属标签

可能回答问题的人

  • 人生的旅途

    10 粉丝484 提问6 回答
  • 不吃貓的鱼oo

    5 粉丝466 提问6 回答
  • 富有想象力的人

    4 粉丝0 提问5 回答
  • Richel

    8 粉丝0 提问4 回答

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励