web-dev-qa-db-ja.com

すべてのスクリプトをjquery mobileのindex.htmlに配置する必要がある理由

$ .mobile.changepageを使用して、phonegap + jquerymobileプロジェクトでリダイレクトを実行しました。ただし、混乱するのは、すべてのページのスクリプトを同じファイルindex.htmlに配置する必要があることです。そうでない場合、リダイレクトページはヘッダーで関数を実行できません。

たとえば、私のindex.htmlは$(document).bind("deviceready",function(){$.mobile.changepage("test.html");})のようです

その後、私のデバイスはtest.htmlにリダイレクトされます

$("#btnTest").click(function(){alert("123");})
<button id="btnTest">Test</button>

ただし、スクリプトはtest.htmlでは実行されません。次に、スクリプトをindex.htmlに配置すると、期待どおりの処理が行われます。いずれにしても、すべてのスクリプトを同じページに配置すると、プロジェクトはますます保存が難しくなります。あなたの助けに感謝します。

javascriptjqueryhtmlcordovajquery-mobile
25
Jack He

はじめに

この記事は[〜＃〜]こちら[〜＃〜]としても見つかります私のブログの。

JQuery Mobileがページ変更を処理する方法

この状況を理解するには、jQuery Mobileの仕組みを理解する必要があります。他のページをロードするためにajaxを使用します。

最初のページは正常に読み込まれます。そのHEADおよびBODYDOMに読み込まれ、他のコンテンツを待つためにそこにあります。 2番目のページが読み込まれると、そのBODYコンテンツのみがDOM。より正確には、BODYでも完全にロードされていません。属性data-role = "page"を持つ最初のdivのみが読み込まれ、それ以外はすべて破棄されます。 BODY内にさらにページがある場合でも、最初のページのみがロードされます。このルールは後続のページにのみ適用されます。最初のページにさらにページがある場合[〜＃〜] html [〜＃〜]すべてのページがロードされました。

そのため、ボタンは正常に表示されますが、クリックイベントは機能しません。親HEADがページ遷移中に無視された同じクリックイベント。

これが公式のドキュメントです： http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

残念ながら、あなたはこれが彼らのドキュメントで説明されているのを見つけるつもりはありません。エーテル彼らはこれが常識であると思うか、または私の他のトピックのようにこれを説明するのを忘れました。 （jQuery Mobileのドキュメントは大きいですが、多くのものが不足しています）。

解決策1

2番目のページと他のすべてのページで、SCRIPTタグをBODYコンテンツ、次のように：

<body>
    <div data-role="page">
        // And rest of your HTML content
        <script>
            // Your javascript will go here
        </script>
    </div>
</body>

これは簡単な解決策ですが、それでも醜い解決策です。

実際の例は、他の私の回答のここにあります：変更後にページ表示がトリガーされない

別の実用的な例： jQuery-mobile transition でページが異なる方法で読み込まれる

解決策2

すべてのJavaScriptを元の最初のHTMLに移動します。すべてを収集し、それを単一のjsファイル内のHEADに入れます。 jQuery Mobileが読み込まれた後に初期化します。

<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Put your code into a new file
</head>

最後に、これが優れたソリューションの一部である理由を説明します。

解決策3

ボタンおよびページの変更に使用するすべての要素でrel = "external"を使用します。そのため、ajaxはページの読み込みに使用されず、jQuery Mobileアプリは通常のWebアプリケーションのように動作します。残念ながら、これはあなたの場合には良い解決策ではありません。 Phonegapが通常のWebアプリとして機能することはありません。

<a href="#second" class="ui-btn-right" rel="external">Next</a>

公式ドキュメント、章を探す：Ajaxを使用しないリンク

現実的なソリューション

現実的なソリューションはSolution 2を使用します。しかし、ソリューション2とは異なり、同じindex.jsファイルを使用して、他のすべてのページのHEAD内で初期化します。

これで私に質問できます[〜＃〜]なぜ[〜＃〜]？

PhonegapのようなjQuery Mobileはバグがあり、遅かれ早かれエラーが発生してアプリが失敗します（ロードされたDOMを含む）すべてのjsコンテンツが単一のHTMLファイル内にある場合。 DOMは消去される可能性があり、Phonegapは現在のページを更新します。そのページにJavaScriptがない場合は、再起動するまで機能しません。

最後の言葉

この問題は、適切なページアーキテクチャで簡単に修正できます。誰かが興味があれば私は[〜＃〜]記事[〜＃〜]について書きました優れたjQuery Mobileページアーキテクチャ。一言で言えば、jQuery Mobileの仕組みに関する知識は、最初のアプリを正常に作成する前に知っておく必要がある最も重要なことです。

59
Gajotres

Jquery Mobileはajaxを使用して「ページ」をロードします。ここの「ページ」は、data-role = pageのdivです。物理ページindex.htmlをロードすると、changePageを使用して、そのページ内の任意の「ページ」divに移動できます。

ただし、他の物理ページから「ページ」をロードする場合、jQMはそのページから最初の「ページ」divのみをロードします。実際に何が起こるかは、ページを変更しないことです。jQMは、ajaxを使用して特定の「ページ」divをロードし、それを現在のページに挿入するだけです。

すべての「ページ」をHTMLページに配置し、そこから移動する2つの可能なアーキテクチャがあります。または、複数のページアーキテクチャを持つこともできます。いつでもこれを混ぜることができます。

ページを物理的に変更するには、リンクにrel = externalを追加する必要があります。

1
wmfairuz

通常の通常のHTMLページとは異なり、jQuery Mobileはページ間を移動するときにajaxテクノロジーを使用します。したがって、すべてのHTMLページにすべてのJSファイルとライブラリを必ずインポートしてください。

よく注意すると、2番目のページをロードするときに、前のページのJSファイルが考慮されることがわかります。ただし、現在のページを強制的にrrefreshすると、現在のページのjsファイルが有効になります。

先に述べたように、すべてのhtmlファイルにjsファイルをインポートしてください。

また、devicereadyを呼び出す必要はありません。次の構文を使用して、ページ固有のjs関数を呼び出します

$(document).on('pageshow', '#YourPageID', function(){
    // Your code goes here
});
1
Jay Mayu