Question

I am writing a backbone collection which requires pagination. So this is my code

define([
  'underscore',
  'backbone',
  'models/object',
  'backbone_paginate'

], function(_, Backbone, Object){
   "use strict";
  var myCollection= Backbone.Paginator.clientPager.extend({


    model: Object,


      paginator_core: {
          // the type of the request (GET by default)
          type: 'GET',

          // the type of reply (jsonp by default)
          dataType: 'json',

          // the URL (or base URL) for the service
          url: location.protocol + '//' + location.host+'/address'
      },

      paginator_ui: {
          // the lowest page index your API allows to be accessed
          firstPage: 1,

          // which page should the paginator start from
          // (also, the actual page the paginator is on)
          currentPage: 1,

          // how many items per page should be shown
          perPage: 3,

          // a default number of total pages to query in case the API or
          // service you are using does not support providing the total
          // number of pages for us.
          // 10 as a default in case your service doesn't return the total
          totalPages: 10,

          pagesInRange: 3
      },

      server_api: {
           '$top': function() {
               return this.totalPages * this.perPage; },

          },

       parse:function(dat){
      return dat.items;
    }


     });
  return new myCollection();
});

My view looks like this:

define([
  'jquery',
  'underscore',
  'backbone',
   'collections/addressLists',
     'models/object',
     'views/shared_object_item',

], function($, _, Backbone, AddressLists,Address,Shared_object_item){
  "use strict";

  var AppView = Backbone.View.extend({
    events: {

    },



    initialize: function() {

      _.bindAll(this,'render','updateData','showMoreData','showAllData');              this.collection=AddressLists;
     this.collection.bind('reset',this.render);
       this.collection.fetch();


    },

     el:$('div')[0],
     render: function() {

       var that=this;
      $('.innerContainer').bind('scroll',function(){
         if($(this)[0].scrollHeight-$(this).scrollTop()==$(this).outerHeight()){
           that.showMoreData();
          }
      });
        this.updateData();
       },

    updateData:function(){
      var that=this,collection;
      $('.innerItem').empty();

      _.each(this.collection.models,function(model){
         $('.innerItem').append(new Shared_object_item({parent:that,collection:that.collection,model:model}).render().el);
      });

    },
      showMoreData:function(){

this.collection.requestNextPage();

      },
   });
  return AppView;
});

now in my view I am calling : fetch();

and on success of the fetch I am trying to call this.collection.requestNextPage();

It works fine till fetch(), but as soon as it hits the requestNextPage function(which resides in the showMoreData() function ), it throws an error stating that requestNextPage() is not a function.

I dont know wheere am I going wrong here..

Answer 1

From the Backbone.Paginator docs requestNextPage(options) is a convenience method on Paginator.requestPager, but you are extending Paginator.clientPager. Looks like you’ll need to use nextPage().