2

私の index.html は次のようになります。

<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
    <list rel="stylesheet" href="css/app.css" />
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/underscore.js"></script>
    <script type="text/javascript" src="js/backbone.js"></script>
    <script type="text/javascript" src="js/views/attachmentlist.js"></script>
    <script type="text/javascript" src="js/models/attachmentmodel.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script src="js/jquery.mobile-1.1.0.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0rc1.js"></script>
    </head>

    <body></body>

</html>

これらのファイルのどれも jQuery Mobile への参照を持っていません。Index だけが参照しています。

私の app.js ファイルは次のようになります。

$(document).live("mobileinit", function () {
    console.log('in Mobile Init');
    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;

    // Remove page from DOM when it's being replaced
    $('div[data-role="page"]').live('pagehide', function (event, ui) {
        $(event.currentTarget).remove();
    });
});

何かが原因で "mobile init" が 2 回起動します。それが何なのか、それが本当に問題なのかさえわかりませんが、あってはならないことのように感じます。
これを修正する方法はありますか？

編集
私は実際に、単純な「スクリプト」タグを本文に直接入れてそこでconsole.logを実行すると、2回実行されることに気付きました....すっごく....このコードの何かが私のページ全体を2回初期化されました。
実際、セットアップ全体が 2 回ロードされているように見えます。アプリが最初にロードされたときに何が起こるかのチェーンに沿ってconsole.logsを配置していますが、すべてが2回発生しています。

4

2 に答える 2

1

これはおそらくあなたが聞きたいと思う答えではありませんが、私があなたに提供できる最も有益なアドバイスであると私は信じています。

可能であれば、Jquerymobileを削除することを強くお勧めします。私は最近、このようなことを行うJquerymobileで問題が発生した後に問題が発生したチームで作業しました。ページの読み込み中に発生する非同期コードがある場合、Jquerymobileのイベントを自分のイベントと同期させることはほぼ不可能です。

モバイルサイトにシームレスでネイティブな雰囲気が必要な場合は、SpineとRequireJSを試してみることを強くお勧めします。設計上の制約に応じて、Spine Mobileも利用可能であり、一部の作業を代行します。

Jquery mobileは基本的に、ブラウザをだましてサイトがシングルページアプリであると思わせ、そのために非常に不格好に感じてしまいます。バックアップして正しく実行し、実際に実際のシングルページアプリを構築する時間があれば、よりクリーンで信頼性の高いコードと、より使いやすいアプリができあがります。

JqueryMobileを捨てる。あなたの開発チームとあなたのユーザーはあなたに感謝します。

編集：2015年なので、SpineとRequireはもう使用しないでください。WebpackとReactをお試しください！ただし、このような問題がもっと必要な場合を除いて、Jquerymobileは絶対に使用しないでください。

于 2012-05-17T18:40:42.540 に答える
1

私はかつて似たようなことに出くわしました。価値があるのは、これが私がそれを解決した方法です：

$(document).bind("mobileinit", function() {
  $.extend(  $.mobile , {
    autoInitializePage: false,
    loadingMessage: false
  });
});

あなたのコードに適応させる必要がある場合は、次のようなものを試してください。

$(document).live("mobileinit", function () {
    console.log('in Mobile Init');

    $.extend(  $.mobile , {
        autoInitializePage: false,
        loadingMessage: false
    });

    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;

    // Remove page from DOM when it's being replaced
    $('div[data-role="page"]').live('pagehide', function (event, ui) {
        $(event.currentTarget).remove();
    });
});

ちなみに、jQuery の.live()関数は使用しないでください。彼ら自身のドキュメントによると：

jQuery 1.7 以降、この.live()メソッドは非推奨になりました。.on() を使用して、イベント ハンドラーをアタッチします。古いバージョンの jQuery のユーザーは、 よりも.delegate()優先して使用する必要があります.live()。

于 2012-05-17T18:32:25.007 に答える