I've been trying to implement lazy loading in emberjs by following this answer: https://stackoverflow.com/a/11925918/341358 . But I'm stuck when ember loads the initial dataset. For some reason the first ajax call keeps calling: /newsitems
instead of only the first page: /newsitems?page=1
. From then on, the loadmore functionality works great, returning me a limited data set for page 2, 3, 4, ...
So my question is: how do I make sure that only the items for the first page are loaded and not all of them at once?
Here's how my route looks like:
App.NewsitemsRoute = Ember.Route.extend({
model: function() {
return App.Newsitem.find();
}
});
Here's my controller:
App.NewsitemsController = Ember.ArrayController.extend({
currentPage: 1,
canLoadMore: function() {
return this.get('currentPage') < 10;
}.property('currentPage'),
loadMore: function() {
if (this.get('canLoadMore')) {
this.set('isLoading', true);
var page = this.incrementProperty('currentPage');
this.get('store').findQuery(App.Newsitem, {page:page});
}
else
{
this.set('isLoading', false);
}
}
});