backbone.js pagination backbone.paginator

Backbone.Paginator : cannot read property 'requestPager'

I am trying to implement Backbone.Paginator version 0.8 and on page load I am meet with the error: Uncaught TypeError: Cannot read property 'requestPager' of undefined.

First I referred to the CDNJS file and then I downloaded the raw code and placed it in app/assets/javascripts. I also required it in application.js '//= require backbone.paginator.min.js'.

Here is the my section code located in application.html.erb:

<head>
  <title>D2jive</title>
  <link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  <%= stylesheet_link_tag    "application", media: "all" %>
  <%= javascript_include_tag "application" %>
  <script type="text/javascript" src="assets/backbone.paginator.min.js"></script>
  <%= csrf_meta_tags %>
</head>

On window I instantiate my router:

window.D2Jive = {
  Views: {},
  Routers: {},
  Events: {},
  Models: {},
  Collections: {},

  initialize: function() {
    D2Jive.router = new this.Router();
    Backbone.history.start({pushState: true});
  },

};

Located in my router I refer to my PaginatedCollection:

this.collection = new D2Jive.Collections.PaginatedCollections( [], { location: location });

Then where the actual code for the Backbone.Paginator.requestPager appears the error pops up.

D2Jive.Collections.PaginatedCollection = Backbone.Paginator.requestPager.extend({
 initialize: function(attributes, options){
    this.city = options.location;
  },

I am still getting used to JavaScript, but it seems the Backbone.Paginator code is loading after the window initialize function creates a new router and checks the Backbone.Paginator collection I created. I am just not sure how to avoid that.

After the error pops up, in the console I am able to load the Backbone.Paginator.requestPager.

Backbone.Paginator.requestPager.extend
function (protoProps, staticProps) {
    var parent = this;
    var child;

    // The constructor function for the new subclass is either defined by you
    // (the "constructor" property in your `extend` definition), or defaulted
    // by us to simply call the parent's constructor.
    if (protoProps && _.has(protoProps, 'constructor')) {
      child = protoProps.constructor;
    } else {
      child = function(){ return parent.apply(this, arguments); };
    }

    // Add static properties to the constructor function, if supplied.
    _.extend(child, parent, staticProps);

    // Set the prototype chain to inherit from `parent`, without calling
    // `parent`'s constructor function.
    var Surrogate = function(){ this.constructor = child; };
    Surrogate.prototype = parent.prototype;
    child.prototype = new Surrogate;

    // Add prototype properties (instance properties) to the subclass,
    // if supplied.
    if (protoProps) _.extend(child.prototype, protoProps);

    // Set a convenience property in case the parent's prototype is needed
    // later.
    child.__super__ = parent.prototype;

    return child;
  }

Any help will be much appreciated!

Solution

Make sure you include the backbone paginator library before starting your app. The reason you can access requestPager after the error pops up is likely because at that stage, the lib has been loaded.

To make sure this isn't the issue with your code, try including the backbone paginator code in the page's <head> section.

Edit based on comment:

You need to change your "app/assets/javascripts/application.js" so it includes the files in the proper order. Something like:

//= require jquery
//= require jquery_ujs
//= require underscore
//= require backbone
//= require bacbkone.paginator.min
//= require_tree .

If you just rely on require_tree to include the files, they won't necessarily be included in the right order, which is what you're experiencing.

Also, since Backbone paginator gets included in the application file, it should no longer be in .