backbonejs lazy load collection

Question

list view

 define(['jquery', 'underscore', 'backbone', 'text!views/abcView/abcListView.html','views/abcView/ListTemplate' ,'app/utils', 'collection/abcListCollection'], function($, _, Backbone, tmpl_abcummaryView, abcListView, Utils, abcListCollection) {

var abcListView = Backbone.View.extend({
    // Setting the view's template property using the Underscore template method        
    template: _.template(tmpl_abcummaryView),
    // View constructor
    initialize: function() {            
        mainRouter.collections.abc = new abcListCollection();            
    },
    // View Event Handlers
    events: {

    },
    // Renders the view's template to the UI
    render: function() {
        var self=this;
        this.$el.html(this.template({data: this.templateData}));            
        mainRouter.collections.abc.fetchData({
                success: function (collection, response) {
                    _.each(collection, function (obj) {  
                        html = new abcListView({model: obj}).render();
                        self.$el.find('#abcList').append(html);                            
                    })
                },
                error: function (err) {
                    console.log("error");
                }
        });
        // Maintains chainability
        return this;
    }
});
return abcListView;
 });

collection

 define(['underscore', 'backbone', 'models/abcModel', 'app/utils'], function(_, Backbone, abcModel, Utils) {

var self;
//List of Alerts stored in Backbone Collection
abcListCollection = Backbone.Collection.extend({
    model: abcSummaryModel,
    initialize: function() {           
        self = this;
        _.bindAll(this, 'fetchData');
    },

   fetchData: function(obj) {           
        add=true;
        var data = {
            "method": "method name",
            "params": {
                param1:"param1",
                param2:"param2"
            }
        }

        Utils.Ajax.post(Utils.WebAPI.WebAPIServer, data, function(response, textStatus, jqXHR) {                                
            obj.success.call(self.collection, response);
        }, 'json', function(err) {
            console.log(JSON.stringify(err));
            obj.error.call(err);
        }, "loading");

    },
    collection: {}
});
return abcListCollection;
});

How to do lazy loading of collection ie display 5 items initially and when user scrolls screen fetch next 5 records?

Answer 1

Before doing anything else your web service needs to have a way of returning the subset of items based on the parameters passed. For simplicity we will refer to that as the page number For example say your web service takes a page parameter that will return 5 items based on the page number (so page 1 returns items 1-5, page 2 6-10 etc.).

Next you need to keep track of what page your collection is at, and then based on that each time you want to load more models you increment your collections page number and make a fetch passing the page parameter.

For example each time your want to fetch more models:

var MyCollectionView = Backbone.View.extend({
    //...
    pageNumber:0,


    fetchNewItems: function () {
      this.pageNumber++;
      this.collection.fetch({data: {pageNumber: this.pageNumber}});
    }

 }

As far as loading the items when the user scrolls you will need to bind to the window's scroll event and then fetch accordingly, you can either do that in your collection's view or alternatively especially if your want other things to happen as well based on the scroll you can create a view that monitors the windows scroll position and trigger an event which your other views can subscribe to.

In your specific case it looks like you aren't actually using backbone's fetch to make your requests, however the principle remains the same.

A couple of other points, you might want to only increment the pageNumber in your success call back, and you might want to either set a flag once all your items are loaded so you don't keep making fetch request or unbind your event handler for the scroll event (for example once you get back an empty array from your service).