Backbone.Paginator : cannot read property 'requestPager'

Question

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!

David Sulc · Accepted Answer · 2014-04-12T07:03:59.043

1

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 .

edited Apr 12 '14 at 07:03

answered Apr 10 '14 at 11:29

David Sulc

25,946
3
52
54

Sorry should have included my code, I have edited my question above. As you can see I reference the file in the application.html.erb. Thanks! – Spencer Apr 10 '14 at 21:05
Still same error. This time if I swap the lines I get the error 'Backbone is not defined' because the Paginatior needs Backbone. So then I added a line above the backbone.paginator where I add the application.js that requires Backbone and then the 'Backbone is not defined' error goes away, but the "Cannot read property 'requestPager' of undefined" error is still there. Thanks again for your help with this! – Spencer Apr 11 '14 at 22:21
Yes, I forgot about rails assets... I've updated my answer: your application.js needs to list the dependencies in the correct order. – David Sulc Apr 12 '14 at 07:04

Backbone.Paginator : cannot read property 'requestPager'

1 Answers1