Trouble with lazy loading in emberjs

Question

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

Ben Ben · Accepted Answer · 2013-03-06T19:54:04

Can you change your route to include a default page number of 1?

e.g.

App.NewsitemsRoute = Ember.Route.extend({
  model: function() {
    var controller = this.controllerFor('Newsitems');
    return App.Newsitem.find({page: controller.get('currentPage')});
  }
});

Edit: What if you get the page number from the controller?

Trouble with lazy loading in emberjs

1 Answers