1

いくつかのJSライブラリを組み合わせてモバイルSPAWebサイトを作成しようとしています。ルーティングエンジンがないknockoutJSを使用しているので、SammyJSまたはPathJSから取得します（まだ決定していません）。そして、jQuery Mobileを使用して、コントロールとモバイルデザインを取得したいと思います。

問題は、jquery mobile jsファイルをページに含めると、ルーティングエンジンが機能しなくなることです。実際には機能しますが、window.location.hashgetは私だけでなくjquerymobile自体によっても変更されます。

コードは次のようになります。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);

これで、これがfalseに設定されていることがわかります。その $.mobile.hashListeningEnabled = false;ため、jquerymobileはハッシュの変更をリッスンしたり反応したりすることはありません。

だが！localhost / sammy /＃homeからlocalhost / sammy /＃home / detail / 1に移動すると、ハッシュの変更が発生し、何らかの理由ですぐにlocalhost / sammy / home / detail / 1に変更され、ハッシュ自体が省略され、ルートは実行されません。

自分のことをよく説明しなかったらごめんなさい。誰もが見られるようにサーバー上で公開するように取り組んでいますが、残念ながら時間がかかります。

その間、誰かがこれを修正するために私が何ができるかについて何か考えを持っているなら、それは素晴らしいでしょう！

4

1 に答える 1

0

どうやら (そして、jQuery Mobile Web サイトに書かれているように、「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 に答える