将 PagerJS 与 History.js 正确集成答案

【问题标题】：Properly integrating PagerJS with History.js将 PagerJS 与 History.js 正确集成
【发布时间】：2013-10-09 02:29:48
【问题描述】：

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

对象函数 History() { [native code] } 没有方法 '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 集成的正确方法是什么？

【问题讨论】：

标签： javascript knockout.js single-page-application history.js pagerjs

【解决方案1】：

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

您必须拥有<base href="..."/> 才能指定您的基本网址。
不应包含 Git 中的原始 history.js 文件，而应使用 jquery.history.js 包。
不要使用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;
});

【讨论】：