6

いくつかの背景。

デフォルトでは、別の HTML ページへのリンクをクリックすると、JQM はそのページの最初の data-role="page" をロードし、それを最初のページの DOM にアタッチします。JQM はそのページ div のみをロードし、スクリプトはロードしません。そのコンテナの外にあるなど。

「login.html」「menu.html」「account.html」「settings.html」などの5ページのjQueryモバイルアプリがあります。

私はページを次のように変更します。

 $.mobile.changepage("account.html")

また、すべてのページ ロード ロジックを最初のページlogin.htmlに次のように配置しました。

<script>
     $(document).on('pageinit', '#loginpage', function() {
       //do some stuff run some ajax scripts and add some html to its body
    });

  $(document).on('pageinit', '#accountpage', function() {
        //do some stuff run some ajax scripts and add some html to its body
    });

   $(document).on('pageinit', '#settingspage', function() {
        //do some stuff run some ajax scripts and add some html to its body
    });

</script>

このアプリはうまく機能しますが、問題は、非常に壊れやすく、予期しないエラーから生き残るのが難しいことです. 例えば;

すべてのページの body html がどのように読み込まれるかはlogin.htmlで定義されているため、これは、ユーザーがこれらのページのいずれかを手動で更新すると、ページはそれらのスクリプトを実行せずに読み込まれ、本文のない空のページが読み込まれることを意味します。その瞬間、正しい DOM がメモリから削除されるため、ユーザーは空のページでいっぱいのアプリで立ち往生します。唯一の方法は、アドレスバーに「login.html」と入力してからすべてのプロセスを開始できるほど賢いことです。スムーズに。

アドレスバーを %100 非表示にすることはできないと思います。下にスクロールすると再び表示されます。

SO これは私が思いついた問題の 1 つです。他にもいくつかの奇妙なことが発生する可能性があります。何らかの方法で DOM が破損した場合、アプリを再度使用する唯一の方法は、login.html アドレス バーを入力することですが、ユーザーはおそらく気にしないでしょう。

DOM の破損を検出したり、ユーザーを更新して login.html に転送したりするなど、このアプリをより堅牢にする方法を教えてください。

4

1 に答える 1

2

いくつかの苦痛を軽減する 1 つの方法は、適切な html ファイルの要素内にページ固有のスクリプトを配置 data-role="page"bodyし、その要素の外側 (および/またはのおよび) ですべてのページに同じスクリプトを保持することheadです。

そうすれば、ユーザーがページを更新しても、必要なすべてのスクリプトが引き続き実行されます。ただし、ハンドラーをバインドする前に、まずそれらをアンバインドする必要があるという問題があります。そうしないと、複数のハンドラーがアタッチされてしまいます。

これを説明するには:

でlogin.html(更新):

<div data-role="page" id="loginpage">
    <script>
        $(document).off('pageinit', '#loginpage').on('pageinit', '#loginpage', function() {
            $(document).off('click', '#btnaccount').on('click', '#btnaccount', function(){
                $.mobile.changePage("jqmaccount.html", {reloadPage: true});
            });
            console.log("paginit in loginpage");
        });
        $(document).off('pageshow', '#loginpage').on('pageshow', '#loginpage', function() {
            console.log("pageshow in loginpage");
        });
    </script>
    <div data-role="content">
        <a id="btnaccount" href="#" data-role="button">Account</a>
    </div>
</div>

でaccount.html(更新):

<div data-role="page" id="accountpage">
    <script>
    $(document).off('pageinit', '#accountpage').on('pageinit', '#accountpage', function() {
        $(document).off('click', '#btnlogout').on('click', '#btnlogout', function(){
            $.mobile.changePage("jqmlogin.html", {reloadPage: true});
        });
        console.log("pageinit in accountpage");
    });
    $(document).off('pageshow', '#accountpage').on('pageshow', '#accountpage', function() {
        console.log("pageshow in accountpage");
    });
    </script>
    <div data-role="content">
        <a id="btnlogout" href="#" data-role="button">Logout</a>
    </div>
</div>

このセットアップでは、ユーザーが account.html を更新しても、そのページの [ログアウト] ボタンは引き続き機能します。

于 2013-01-30T21:31:27.970 に答える