Properly integrating PagerJS with History.js

Question

I'm trying to set up a SPA using Knockout, pagerjs, and history.js. However, when I click on a link containing data-bind="'page-href': '/somepath'", I get a JS error:

Object function History() { [native code] } has no method 'pushState'

This would indicate to me that I'm initializing pagerjs incorrectly, but I thought I was following the demo correctly. Here's how I'm initializing pagerjs:

define(['knockout', 'pager', 'history'], function (ko, pager, history) {
    // [define my view model]

    pager.useHTML5history = true;
    pager.Href5.history = history;
    pager.extendWithPage(viewModel);

    // [apply bindings]

    pager.start();
});

To enable history.js to load as an AMD module, I added this to the bottom of history.js:

// [original history.js code]

define(function() { return History; });

However, I notice that History does not have a pushState method, which is what pagerjs tries to call.

What is the correct way to integrate pagerjs and history.js?

Answer 1

Thankfully, I found this unit test code. Here's what I learned:

1. You must have a <base href="..."/> to specify your base URL.
2. You should not include the raw history.js file that's in Git, but use the jquery.history.js bundle.
3. Instead of using pager.start(), use pager.startHistoryJs().

Here's my updated init code:

define(['knockout', 'pager', 'history'], function (ko, pager, history) {

    var viewModel = /* [Create my view model] */;

    pager.useHTML5history = true;
    pager.Href5.history = history;
    pager.extendWithPage(viewModel);

    ko.applyBindings(viewModel);

    pager.startHistoryJs();
});

And here's how I AMD-ized jquery.history.js:

define(['jquery'], function () {

    // [Original code]

    return History;
});