CODEWITHSUNDEEP
jqueryknockout.jsrequirejshistory.jspagerjs
Nathan Friend
Nathan Friend

Reputation: 12834

Pager.js + History.js + Require.js - "Unable to get property 'bind' of undefined or null reference"

I'm setting up a new Knockout web app using Require.js, Pager.js, and History.js. I've set up my initialization according to the docs, but I'm receiving an "Unable to get property 'bind' of undefined or null reference" error from Pager.js when I call pager.startHistoryJs().

Here's my Require.js config:

require.config({
    paths: {
        'knockout': '/scripts/lib/knockout-3.2.0',
        'jquery': '/scripts/lib/jquery-1.11.2.min',
        'text': '/scripts/lib/text',
        'pager': '/scripts/lib/pager.min',
        'history': '/scripts/lib/history'
    },
    shim: {
        'pager': ['jquery', 'knockout'],
        'history': ['jquery', 'pager', 'knockout'],
    },
    waitSeconds: 0
});

And here's my Require.js initialization script:

require(['knockout', 'viewmodel/appViewModel', 'jquery', 'pager', 'history', 'lib/domReady!'], function (ko, appViewModel, $, pager) {
    pager.useHTML5history = true;
    pager.Href5.history = History;
    var viewModel = new appViewModel();
    pager.extendWithPage(viewModel);
    ko.applyBindings(viewModel);
    pager.startHistoryJs();
});

Here's the line in Pager.js (line 1497) that is throwing the error:

// Bind to StateChange Event
pager.Href5.history.Adapter.bind(window, 'statechange', function () {
    var relativeUrl = pager.Href5.history.getState().url.replace(pager.Href5.history.getBaseUrl(), '');
    goTo(relativeUrl);
});

What piece am I missing? I haven't been able to find much relevant info on this error.

Upvotes: 2

Views: 1189

Answers (2)

Louis
Louis

Reputation: 151491

The error you are getting is consistent with loading History.js without an adapter loaded. If I look at the code in history.js, I see that if there is no adapter available, the init function silently returns false and History.js is not initialized.

I would suggest loading the jQuery adapter and making history dependent on it.

Upvotes: 3

Alexander O'Mara
Alexander O'Mara

Reputation: 60577

It looks like you are missing the History (and probably something for lib/domReady!) argument in your require function.

require(['knockout', 'viewmodel/appViewModel', 'jquery', 'pager', 'history', 'lib/domReady!'], function (ko, appViewModel, $, pager, History, domReady) {
    pager.useHTML5history = true;
    pager.Href5.history = History;
    var viewModel = new appViewModel();
    pager.extendWithPage(viewModel);
    ko.applyBindings(viewModel);
    pager.startHistoryJs();
});

Upvotes: 0

Related Questions