Currently I am fetching a collection that has over 1000 models which has a decent delay. How can I fetch 50 at a time? Also, is it possible to hit a "more" button to fetch another 50 that is not currently there?

Trying to advoid grabing the entire collection at once and have more of a "lazy loading" type of scheme.

Here is my current render method

render: function(){
        var self = this
        var collection = this.collection

        collection.each(function(tenant){ 
            var view = new TenantView({
                model: tenant, 
                collection: collection 
            })
            self.$el.append(view.render().el) 
        })
        return this
    }

Currently I am fetching a collection that has over 1000 models which has a decent delay. How can I fetch 50 at a time? Also, is it possible to hit a "more" button to fetch another 50 that is not currently there?

Trying to advoid grabing the entire collection at once and have more of a "lazy loading" type of scheme.

Here is my current render method

render: function(){
        var self = this
        var collection = this.collection

        collection.each(function(tenant){ 
            var view = new TenantView({
                model: tenant, 
                collection: collection 
            })
            self.$el.append(view.render().el) 
        })
        return this
    }

• javascript
• jquery
• backbone.js

3 Answers 3

You have to specify {add: true} and your pagination arguments in collection.fetch call. It will append to collection instead of reseting its contents.

collection.fetch({data: {page: 3}, add: true})

Then simply listen to collection's add event and append item to your view.

UPDATE: in the current version of backbone you need to call:

collection.fetch({data: {page: 3}, remove: false});

From the backbone website under Collection method fetch.

Backbone.sync = function(method, model) {
  alert(method + ": " + model.url);
};

var Accounts = new Backbone.Collection;
Accounts.url = '/accounts';

Accounts.fetch(); 

You could set a limit in the query string of the url like /accountants?offset=0&limit=50.

Limit the query results from your database using these variables (offset, limit).

Modify the query string variables after fetching the requested models so when the user presses a button or scrolls down on your page the request for the next batch of models would be /accountants?offset=50&limit=50

I would do this on the view itself, rather than overwriting sync or fetch itself.

Something like:

// when extending your view

initialize: function(options) {
  //... 
  this.collection.on('add', this.renderTenant, this);
},

events: {
  // change the selector to match your "more" button
  'click button.more': 'uiMore'
},

// Just tacking this on the view.  You could make it an option, or whatever.
perPage: 50,

// this would produce a query with `offset` and `length`.  Change it to 
// however your request should paginate: page/perPage, just page, etc.
uiMore: function() {
  var $more = this.$('.more');
  var data = {};
  data.offset = this.collection.length;
  data.length = this.perPage;
  $more.prop('disabled', true);
  this.collection.fetch({data: data, add: true, success: function() {
    $more.prop('disabled', false);
  });
},

renderTenant: function(tenant) {
  var view = new TenantView({
    model: tenant, 
    collection: this.collection 
  })
  this.$el.append(view.render().el);
},

render: function(){
  this.collection.each(this.renderTenant.bind(this));
  return this;
}