无限滚动，支持ember.js (延迟加载)
我有一个视图，其中可以有大量的项目供用户滚动，我想实现无限滚动来支持内容的渐进式加载。
这看起来像一些人的have done pagination，但谷歌没有提出任何人讨论他们如何做无限列表的数据。有没有人已经做过这方面的工作，并有博客帖子/示例代码可以分享？
回答 3
Stack Overflow用户
发布于 2013-03-14 03:26:02
你知道最新发布的Ember.ListView组件吗？
https://github.com/emberjs/list-view
它是在二月份的旧金山Ember Meetup上宣布的。以下是Ember Core开发人员之一Erik Bryn关于使用它的幻灯片：
Stack Overflow用户
发布于 2012-08-13 05:11:24
我已经在GitHub Dashboard project上实现了无限滚动机制，我目前正在开发中。该功能将添加到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 (这是由于控制器的loadMore中的findQuery方法所致)。此外，在调用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;
});Stack Overflow用户
发布于 2013-04-03 07:13:31
我正在根据@pangratz的工作写一个infinite pagination plugin for Ember。
如果您有任何问题或需要改进的地方，请在这里提出任何问题。
https://stackoverflow.com/questions/11907093
复制相似问题