1

JqueryMobileでネストされたページを使用しています。

このように見えます：

// wrap page
<div data-role="page" id="wrap">
     // panel
     <div data-role="panel" data-id="popover">
         // nested pages
         <div data-role="page" id="nested1"></div>
         <div data-role="page" id="nested2"></div>
     </div>
</div>

トランジションでは、$。mobile.pageContainersを切り替えて、ネストされたページをパネルにロードするのではなく、本文（デフォルトはJQM）にロードします。

$.mobile.changePage( page-to-be-loaded, {
          // previous page in panel
          fromPage:from,         
          // update the URL with the nested page hash    
          changeHash:hashChange,     
          // target panel
          pageContainer: $('div:jqmData(id="popover")')
          });

これはすべて期待どおりに機能します=パネル内にネストされたページをロードすると、URLは次のように更新されます。

http://some.com#nested1/2/3...

私の問題は、ラップページを離れて新しいJQMページに完全に移動するときにURLを「クリーンアップ」することです。

この場合、URLは最後のネストされたページでスタックします。JQMに通知する必要がある場合、実際にはまだラップページにいます（どのネストされたページがまだURLにあるかは関係ありません）。

質問： URLを正しい値に更新する方法、またはページパラメータを「工場出荷時のデフォルト」に設定する良い方法を探しています。これにより、JQMはネストされたページでパネル遷移を行ったことを認識しません。

私が試してみました：

// 1. location hash - doesn't work

   window.location.hash = ""


// 2. ReplaceState - breaks on non-push-state browsers

   // on pageinit store defaults
   var $myState = {};   
   $myState.title = document.title;
   $myState.url = location.protocol + '//' + location.host + location.pathname;

  page.data("rememberState", $myState )

  // before leaving the wrap page
  var rem = $('#wrap.ui-page-active').data("rememberState");
  if (rem && typeof rem != 'undefined') {   
     history.replaceState('null',rem.title,rem.url);
     }

// 3. Reload the page when hiding the panel - crashes my browser :-)

   $.mobile.changePage('#wrap', {
                  allowSamePageTransition: true, 
                  changeHash:true,
                  transition:none 
                  });

私はJQMパスからかなり離れているので、ヒントを探しています。ポインタをありがとう！

4

2 に答える 2

0

これは、コードを表示するというよりもアプローチの答えですが、最初に愚かな方法で実行し、次にそれから学習することから得られます。

問題は、プラットフォームで規定されているようにこれを行っていないことです。このように不正なプラットフォームを実行している場合は、プラットフォームを使用しないでください。ネストされたページを取得して削除する必要があります。それは悪い考えです。その動作のためにプログラムされていません。同じファイルに3ページを作成するだけです。次に、複数ページのアプリの使用方法に関するドキュメントを実際に読んでください。私はいくつかのモバイルアプリを作成し、jQueryMobileで悪いアイデアを選択しました。フレームワークを使用してその制限を知っていれば、すべてがスムーズです。

jQuery Mobileがアップグレードされるときに、これをどのようにアップグレードしますか？あなたは道を外れる奇妙な癖を作り出すでしょう。それは良い考えではありません。

于 2012-03-20T15:15:27.347 に答える
0

このように解決しました：

ユーザーが最初にサイトにアクセスしたとき、履歴エントリの数を取得しています。

$windowHistoryAtInit = window.history.length

たとえば、履歴には27のエントリがあり、ユーザーがページAを離れてページBに移動したときにのみ新しいエントリを作成したいので、pageA内のすべてのネストされた遷移はwindow.historyの合計にカウントされません。

ユーザーがページを離れるときに、再確認します。

$(document).on('pagebeforehide', '#pageA', function(e, data) {
   // get number of history entries based on nested transitions
   var distance = window.history.length-self.options.$windowHistoryAtInit
   // go back distance
   window.history.go(-distance);     
   });

私の設定では、距離を戻しても実際のJQM遷移はトリガーされないため、ユーザーがサイトにアクセスしたときに開始した場所にブラウザーを戻し、PageAからPageBに進みます。

50エントリを超えないと思うので、おそらくカウンターから-50を引いてこれを微調整する必要があります。このように、window.history.length 50で入力すると、カウンターは0から「フレッシュ」に開始します。

于 2012-03-20T16:21:59.160 に答える