Backbone limit/iterate on collection fetch

Question

Im trying to set a limit on my collection fetch and then iterate over that. I want to fetch lets say 4 items at a time. When i then run fetch the next time i want it to fetch the next 4 items.

My collection looks like this.

define([
'Underscore',
'Backbone',
'app',
'StartModel',
], function (_, Backbone, app, StartModel) {

var StartCollection = Backbone.Collection.extend({  
    model: StartModel,  
    url: "url",
    startIndex: 0,
    numItems: 4,
    parse: function (response) {
        return response.data;
    },
    initialize: function() {

    }    
}); 
return StartCollection;
});

My fetch function looks like this.(inside a view)

render: function(){
var self = this;
if (this.startIndex != -1) {
    this.collection.fetch({
        data: {
            numItems: self.numItems,
            startIndex: self.startIndex
        },
        success: function (collection, response) {
            if (response.length === self.numItems){
                self.startIndex = self.startIndex + self.numItems;
            } else {
          // if the response is less than 4 models you have reached the end of the models
                self.startIndex = -1;
            }
            self.$el.html(self.template);
            _.each(collection.models, function(model,index) {
                self.$el.find(".holder").append("<p>"+model.toJSON+"</p>"())
            });
        }
    });
}

},

This is my model

define([
'Underscore',
'Backbone',
'app',
], function (_, Backbone, app) {

var StartModel = Backbone.Model.extend({  

    defaults: function() {  
        return {

        };
    },  
    clear: function() {  
        this.destroy();  
    }
}); 
return StartModel;

});

Need some help with this. anyone that knows how to do it?

Answer 1

The way I would do this would be to set up a variable that increments by four each time, sends a request to the server with a flag that indicates which models to return. You can do this by setting a data option. Here is a snippet from the Backbone docs:

jQuery.ajax options can also be passed directly as fetch options, so to fetch a specific page of a paginated collection: Documents.fetch({data: {page: 3}})

Here is some documentation for jQuery.ajax()

Add startIndex and numItems to your collection:

var StartCollection = Backbone.Collection.extend({  
    model: StartModel,  
    url: "url",
    startIndex: 0,
    numItems: 4,
    // ... more code

And in your render function send the pertinent information back to the server when you call fetch

render: function(){
    var self = this;
    if (this.startIndex != -1) {
        this.collection.fetch({
            data: {
                numItems: self.collection.numItems,
                startIndex: self.collection.startIndex
            },
            success: function (collection, response) {
                if (response.length === self.collection.numItems){
                    self.collection.startIndex = self.collection.startIndex +
                       self.collection.numItems;
                } else {
    // if the response is less than 4 models you have reached the end of the models
                    self.collection.startIndex = -1;
                }
                self.$el.html(self.template);
                _.each(collection.models, function(model,index) {
                    self.$el.find(".holder").append(model.toJSON())
                });
            }
        });
    }
},

And in your controller in the server, grab startIndex and numItems from the params and use them to return the correct models to your app.