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 · Accepted Answer · 2013-03-07 16:09:22Z

1

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?

edited Mar 7, 2013 at 16:09

answered Mar 6, 2013 at 19:54

Ben

10.1k5 gold badges43 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

polyclick Over a year ago

Great suggestion but I already tried this before. This makes sure the first call to the backend is: /newsitems?page=1 but calls for next pages doesn't update the view. I can see that a call to the backend is made like: /newsitems?page=2 but the view keeps on showing the first few items. Any thoughts what might cause this?

Ben Over a year ago

This seems redundant since you're already initiating a findQuery from inside your controller, but what happens when you get the page number from the controller as I've done above?

polyclick Over a year ago

The same happens as before: the first time /newsitems?page=1 is called and the second time: /newsitems?page=2. Which is great! But, my view isn't updated, so the new records are never shown on the page.

Collectives™ on Stack Overflow

Trouble with lazy loading in emberjs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related