1

我正在尝试结合一些 JS 库来创建一个移动 SPA 网站。我正在使用缺少路由引擎的 knockoutJS，因此我从 SammyJS 或 PathJS 中获取它（尚未决定）。我想使用 jQuery Mobile 从中获取控件和移动设计。

问题是，每当我将 jquery mobile js 文件包含到我的页面中时，路由引擎就会停止工作。实际上它确实有效，但window.location.hash不仅由我改变，而且由 jquery mobile 本身改变。

下面是代码的样子：在 html 文件中，我得到了一个绑定到模板的 div

(function ($) {
infuser.defaults.templateUrl = "templates";
console.log('just before pageinit');
$(document).bind('pagecreate', function () {
    // disable autoInit so we can navigate to bookmarked hash url
    $.mobile.autoInitializePage = false;

    // let PathJS handle navigation
    $.mobile.ajaxEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
});

$(document).bind('pagebeforechange', function (e, data) {
    var to = data.toPage;
    if (typeof to === 'string') {
       /* var u = $.mobile.path.parseUrl(to);
        to = u.hash || '#' + u.pathname;
        // manually set hash so PathJS will be triggered
        location.hash = to;
        // prevent JQM from handling navigation*/
        e.preventDefault();
    }

});
$(document).bind('pagechange', function (e, data) {
});

var Model = function () {
    this.items = ko.observable(null);
    this.chosenItemData = ko.observable();
    this.state = ko.observable('items');

    this.goToItemDetails = function (item) {
        location.hash = '/details/' + item.id;
    };
};
window.currentModel = new Model();
ko.applyBindings(window.currentModel);

Path.map('#home').to(function () {
    currentModel.state(window.templates.items);
    currentModel.items(window.dummyData);
});
Path.map('#home/details/:id').to(function () {
    var self = this;
    $(currentModel.items()).each(function (index, item) {
        if (item.id.toString() == self.params['id']) {
            currentModel.chosenItemData(item);
            currentModel.state(window.templates.itemDetail);
        }
    });
});

Path.root('#home');

$(function () {
    Path.listen();
})
})(jQuery);

现在，您可以看到它 $.mobile.hashListeningEnabled = false;设置为 false，因此 jquery 移动设备不应该监听或对哈希更改做出任何反应。

但！假设我从 localhost/sammy/#home 移动到 localhost/sammy/#home/detail/1 哈希更改发生并立即更改为 localhost/sammy/home/detail/1 由于某种原因哈希本身被省略并且路线没有被执行。

如果我没有更好地解释自己，我很抱歉。我正在努力将它发布到服务器上，让每个人都能看到它，但不幸的是，这需要时间。

同时，如果有人知道我能做些什么来解决这个问题，那就太棒了！

4

1 回答 1

0

显然（并且它是在 jQuery Mobile 网站中编写的，“initmobile”事件作为它附加的 jquery mobile 脚本触发。为了能够附加事件，应在 jQuery Mobile 脚本之前包含以下行。

<script type="text/javascript">
$(document).on('mobileinit', function () {
    $.mobile.ajaxEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
    $.mobile.linkBindingEnabled = false;
});

那么 jquery mobile 中的 onchangehash 事件将被禁用。

于 2012-12-20T12:03:45.433 回答