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 have done pagination 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?
Best Answer
I've implemented an infinite scroll mechanism at the
GitHub Dashboard
project, I'm currently developing. The feature is added in commit 68d1728.The basic idea is to have a
LoadMoreView
which invokes theloadMore
method on the controller every time the view is visible on the current viewport. I'm using the jQuery plugin inview for this. It allows you to register for aninview
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
canLoadMore
andisLoading
.The
LoadMoreView
basically looks like this:where the
loadMore
template is defined as follows:The controller which handles the fetching of more items is then implemented as follows. Note that in the
loadMore
method a query on the store is performed, which loads a specific page of of entries for a model.The only thing left is to initially set the
content
of the controller to the result of afilter
function, so thecontent
is updated when new models are loaded into the store (which happens due to thefindQuery
method in theloadMore
of the controller). Also, aquery
hash is added when thefilter
is invoked. This ensures that an initial query to the server is made.