4

誰でもjQuery Mobileの「data-url」属性にもっと光を当てることができますか?

jQueryモバイルWebサイトからコンテンツをコピーして貼り付けることは避けてください。これは、私のように同じ混乱状態で同じことを探している他の人を確実に助けることができます.

4

2 に答える 2

8

あなたはドキュメントのかなり古いリンクを見ています。ドキュメントの最新バージョンには、data-url属性の目的に関する詳細情報があります。次のリンクの関連ページで新しい1.0バージョンを確認できます：http：//jquerymobile.com/demos/1.0/docs/pages/page-navmodel.html

ドキュメント、特に1.0ドキュメントがこれをよりよく説明すると私は本当に正直に信じていますが、とにかく試みます：data-url属性を本当に理解するには、すべてのHTMLページを組み合わせるjQueryMobileモデルを理解する必要がありますモバイルWebサイト用の単一のHTMLドキュメントに。これらのページは通常、同じドキュメントに遅延ロードされます。jQuery Mobileがページにロードされた状態でHTMLドキュメントに移動すると、HTMLが解析され、1つの「ページ」のみが表示されます。

data-urlは、Ajaxナビゲーションを有効にするためにjQMページに設定する属性です。リンクをクリックすると、jQMナビゲーションは最初にページ上で一致するdata-url属性を探します。たとえば、URLが「example-host / some / path＃/ features / 123」のjQM対応ページを参照すると、jQuery Mobileはまず現在のドキュメントで、属性がのjQMページを探しますdata-url="/features/123"。見つかった場合は、現在のjQMページを非表示にし、見つかったページを表示します。見つからない場合は、URL「example-host / features / 123」へのAjaxリクエストを試行し、有効なページが見つかった場合は、コンテンツをさらに別のjQMページとしてロードします。

これらのjQMドキュメントのリンクは、さらに役立つはずです。

ページの構造

jQMページモデル

于 2012-01-13T14:34:08.797 に答える
3

追加の非常に重要なユースケースがありますdata-url- これはリダイレクト中です:

ユーザーが に移動し/store/youraccountたとしますが、ログインしていません。サーバーはおそらくユーザーをログイン ページにリダイレクトします/store/login。これは 301 リダイレクトとしてブラウザーに返され、jQuery Mobile が変更を認識していなくても読み込まれます。ページは正しく表示されますが、上部の URL はstore/youraccount.

このようにログインページに設定data-urlすることで、jQuery mobile はリダイレクト後に URL を正しく更新できるようになり、ブックマークや指定<form>なしのタグが機能するようになりますaction。

data-url破損を防ぐ方法<form>:

ページに属性<form>なしで定義されたタグが含まれている場合action、デフォルトの動作は現在のページにポスト バックすることです。/store/youraccount

そのため、配置data-url='/store/loginすると、URL を正しく更新できます。

<div data-role="page" data-url="/store/login" 
     class="ui-page ui-body-c ui-page-active" id="page_">

注: フォームに があっても、actiondata-url を設定する必要があります。これは、data-url を除外すると問題が発生する可能性があることを示す単なる例です。

于 2014-04-14T22:34:18.547 に答える