javascript - 正确地将 PagerJS 与 History.js 集成

Question

我正在尝试使用 Knockout、pagerjs 和 history.js 设置 SPA。但是，当我单击包含 data-bind="'page-href': '/somepath'" 的链接时，出现 JS 错误:

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

这会向我表明我没有正确地初始化 pagerjs，但我认为我正确地遵循了演示。这是我初始化 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();
});

为了使 history.js 能够作为 AMD 模块加载，我将其添加到 history.js 的底部:

// [original history.js code]

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

但是，我注意到 History 没有 pushState 方法，这是 pagerjs 试图调用的方法。

pagerjs 和 history.js 的正确结合方式是什么？

Answer 1

谢天谢地，我找到了this unit test code .这是我学到的:

1. 你必须有一个 <base href="..."/>指定您的基本网址。
2. 你不应该包括原始的history.js Git 中的文件，但使用 jquery.history.js捆绑。
3. 而不是使用 pager.start() , 使用 pager.startHistoryJs() .

这是我更新后的初始化代码:

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();
});

下面是我对 jquery.history.js 进行 AMD 化处理的方式:

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

    // [Original code]

    return History;
});