Take the 2-minute tour ×

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

            var view = new TenantView({
                model: tenant, 
                collection: collection 
        return this
share|improve this question
add comment

3 Answers

up vote 5 down vote accepted

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.

share|improve this answer
I'm kinda unsure what the {page:3} will so. Is that a parameter that needs to to be handled by the db? How will the use look of I passed that obj? –  delboud Nov 25 '12 at 17:13
page will be sent with the request to the server, you should use it to set proper offset in database query. page is just example, you can name it as you want. It may be collection.fetch({data: {offset: 30, limit:30}, add: true}}) whatever you prefer. –  Andrey Kuzmin Nov 25 '12 at 17:17
Why are there 2 open curly braces { and 3 close curly braces }? –  Benjamin Kaiser Sep 3 '13 at 14:54
Just a typo, thanks for correction :) –  Andrey Kuzmin Sep 4 '13 at 12:18
add comment

From the backbone.org website under Collection method fetch.

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

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


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

share|improve this answer
add comment

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 

render: function(){
  return this;
share|improve this answer
Wouldn't that still load all the models then filter through them with the view? That will still have the delay that I am trying to get rid of I would assume. –  delboud Nov 25 '12 at 17:06
On your first fetch you'd only load 50, or 100, or whatever you wanted the first page to be. Then the rest would be loaded one page at a time through the "more" button. –  numbers1311407 Nov 25 '12 at 18:55
add comment

Your Answer


