Question

我正在尝试将一些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 mobile不应该监听或响应散列更改。

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

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

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

Answer 1

显然（并且它是在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事件。

结合淘汰赛与sammy js / path js和jquery mobile

1 个答案: