title: backbonejs lazy load collection
body: <p>list view</p>
  
  <pre><code> 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;
   });
  </code></pre>
  
  <p>collection</p>
  
  <pre><code> 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;
  });
  </code></pre>
  
  <p>How to do lazy loading of collection ie display 5 items initially and when user scrolls screen fetch next 5 records?</p>