blocks|key|501099|text|我已经在GitHub+Dashboard+project上实现了无限滚动机制，我目前正在开发中。该功能将添加到commit+68d1728中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|501100|基本思想是有一个LoadMoreView，每当视图在当前视口中可见时，它将调用控制器上的loadMore方法。为此，我使用了jQuery插件inview。它允许您注册inview事件，当指定选择器的元素在屏幕上可见且消失时，将触发该事件。|501101|控制器还具有属性，这些属性指示是否有更多的项要加载，以及是否有当前获取的项。这些属性称为canLoadMore和isLoading。|501102|LoadMoreView基本上看起来像这样：|501103|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');
++++});
++}
});|code-block|syntax|javascript|501104|其中，loadMore模板的定义如下：|501105|{{#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}}
++++++++no+more+items
++++{{/if}}
{{/if}}|501106|然后按如下方式实现控制器，该控制器处理更多项的获取。请注意，在loadMore方法中，对存储执行查询，该查询加载模型的条目的特定页面。|501107|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);
++++}
++}
});|501108|剩下的唯一一件事就是将控制器的content初始设置为filter函数的结果，以便在将新模型加载到存储中时更新content+(这是由于控制器的loadMore中的findQuery方法所致)。此外，在调用filter时还会添加query散列。这确保了对服务器进行初始查询。|501109|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;
});|501110|entityMap|0|LINK|mutability|MUTABLE|url|http://code418.com/dashboard|1|https://github.com/pangratz/dashboard/commit/68d1728ec26dae5062eae5be43d61083cfc34f14|2|https://github.com/protonet/jquery.inview/^0|4|G|L|7|0|1Q|7|1|0|8|C|18|8|2B|6|1Y|6|2|0|18|B|1K|9|0|0|C|0|0|3|8|0|0|V|8|0|0|F|7|R|6|1J|7|20|8|2A|9|2V|6|36|5|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@$9|1H|A|1I|1|1J]|$9|1K|A|1L|1|1M]]|E|$]]|$1|F|3|G|5|6|7|1N|8|@$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]]|D|@$9|1U|A|1V|1|1W]]|E|$]]|$1|H|3|I|5|6|7|1X|8|@$9|1Y|A|1Z|B|C]|$9|20|A|21|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|22|8|@$9|23|A|24|B|C]]|D|@]|E|$]]|$1|L|3|M|5|N|7|25|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|26|8|@$9|27|A|28|B|C]]|D|@]|E|$]]|$1|S|3|T|5|N|7|29|8|@]|D|@]|E|$O|P]]|$1|U|3|V|5|6|7|2A|8|@$9|2B|A|2C|B|C]]|D|@]|E|$]]|$1|W|3|X|5|N|7|2D|8|@]|D|@]|E|$O|P]]|$1|Y|3|Z|5|6|7|2E|8|@$9|2F|A|2G|B|C]|$9|2H|A|2I|B|C]|$9|2J|A|2K|B|C]|$9|2L|A|2M|B|C]|$9|2N|A|2O|B|C]|$9|2P|A|2Q|B|C]|$9|2R|A|2S|B|C]]|D|@]|E|$]]|$1|10|3|11|5|N|7|2T|8|@]|D|@]|E|$O|P]]|$1|12|3|-4|5|6|7|2U|8|@]|D|@]|E|$]]]|13|$14|$5|15|16|17|E|$18|19]]|1A|$5|15|16|17|E|$18|1B]]|1C|$5|15|16|17|E|$18|1D]]]]

I've implemented an infinite scroll mechanism at the <code>GitHub Dashboard</code> <a href="http://code418.com/dashboard" rel="noreferrer">project</a>, I'm currently developing. The feature is added in commit <a href="https://github.com/pangratz/dashboard/commit/68d1728ec26dae5062eae5be43d61083cfc34f14" rel="noreferrer">68d1728</a>.

The basic idea is to have a <code>LoadMoreView</code> which invokes the <code>loadMore</code> method on the controller every time the view is visible on the current viewport. I'm using the jQuery plugin <a href="https://github.com/protonet/jquery.inview/" rel="noreferrer">inview</a> for this. It allows you to register for an <code>inview</code> event, which is fired when the element of the specified selector is visible on screen and when it disappears.

The controller also has properties which indicate whether there are more items to load and if there are currently items fetched. These properties are called <code>canLoadMore</code> and <code>isLoading</code>.

The <code>LoadMoreView</code> basically looks like this:

<pre class="lang-js prettyprint-override"><code>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');
 });
 }
});
</code></pre>

where the <code>loadMore</code> template is defined as follows:

<pre class="lang-html prettyprint-override"><code>{{#if isLoading}}
 fetching some more stuff &lt;img width="10" src="img/ajax-loader.gif" &gt;
{{else}}
 {{#if canLoadMore}}
 &lt;a {{action "loadMore" target="controller" }}&gt;click to load more items&lt;/a&gt;
 {{else}}
 &lt;i&gt;no more items&lt;/i&gt;
 {{/if}}
{{/if}}
</code></pre>

The controller which handles the fetching of more items is then implemented as follows. Note that in the <code>loadMore</code> method a query on the store is performed, which loads a specific page of of entries for a model.

<pre class="lang-js prettyprint-override"><code>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') &lt; 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);
 }
 }
});
</code></pre>

The only thing left is to initially set the <code>content</code> of the controller to the result of a <code>filter</code> function, so the <code>content</code> is updated when new models are loaded into the store (which happens due to the <code>findQuery</code> method in the <code>loadMore</code> of the controller). Also, a <code>query</code> hash is added when the <code>filter</code> is invoked. This ensures that an initial query to the server is made.

<pre class="lang-js prettyprint-override"><code>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;
});
</code></pre>

blocks|key|501153|text|你知道最新发布的Ember.ListView组件吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|501154|https://github.com/emberjs/list-view|offset|length|501155|它是在二月份的旧金山Ember+Meetup上宣布的。以下是Ember+Core开发人员之一Erik+Bryn关于使用它的幻灯片：|501156|http://talks.erikbryn.com/ember-list-view/|501157|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|10|0|0|0|0|16|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]|Q|$5|M|N|O|A|$P|I]]]]

Were you aware of the newly released Ember.ListView component?

<a href="https://github.com/emberjs/list-view">https://github.com/emberjs/list-view</a>

It was announced at the February San Francisco Ember Meetup. Here's a slidedeck from Erik Bryn, one of the Ember Core developers about using it:

<a href="http://talks.erikbryn.com/ember-list-view/">http://talks.erikbryn.com/ember-list-view/</a>

blocks|key|501217|text|我正在根据@pangratz的工作写一个infinite+pagination+plugin+for+Ember。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|501218|如果您有任何问题或需要改进的地方，请在这里提出任何问题。|501219|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/iHiD/ember-infinite-pagination^0|K|10|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

I'm writing an <a href="https://github.com/iHiD/ember-infinite-pagination" rel="noreferrer">infinite pagination plugin for Ember</a> based on @pangratz's work. 

Please fire any issues on there if you have questions or improvements that you'd like.

I have a view where there can be a large number of items for the user to scroll through and I'd like to implement infinite scrolling to enable progressive loading of the content. 

It looks like some folks <a href="https://stackoverflow.com/questions/8778259/ember-js-rendering-large-lists-without-locking-up-the-browser">have done pagination</a> but Google doesn't bring up anyone discussing how they've done infinite lists with Ember/Ember Data. Anyone already worked through this and have a blog post/example code to share?

infinite scroll with ember.js (lazy loading)

我有一个视图，其中可以有大量的项目供用户滚动，我想实现无限滚动来支持内容的渐进式加载。这看起来像一些人的，但谷歌没有提出任何人讨论他们如何做无限列表的数据。有没有人已经做过这方面的工作，并有博客帖子/示例代码可以分享？

问无限滚动，支持ember.js (延迟加载)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无限滚动，支持ember.js (延迟加载)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无限滚动，支持ember.js (延迟加载)
EN