Сочетание нокаута с sammyjs/pathjs и jquery mobile

Question

Я пытаюсь объединить некоторые из библиотек JS для создания мобильного сайта SPA. Я работаю с knockoutJS, который не использует движок маршрутизации, поэтому я беру его у SammyJS или PathJS (пока не решил). И я хотел бы использовать jQuery Mobile, чтобы получить от него элементы управления и мобильный дизайн.

Дело в том, что всякий раз, когда я включаю js-файл jquery mobile в свою страницу, механизм маршрутизации перестает работать. На самом деле это работает, но 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, по какой-то причине сам хеш опускается, а маршрут не выполняется.

Мне жаль, если я не объяснил себя лучше. Я работаю над тем, чтобы опубликовать его на сервере, чтобы каждый мог его увидеть, но, к сожалению, это требует времени.

Между тем, если кто-нибудь знает, что я могу сделать, чтобы это исправить, это будет здорово!

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

тогда событие onchangehash в jquery mobile будет отключено.