13

少し調べたところから始めますが、単純なJQMの変更であると思われるものを解決する解決策はありません。

次のビュー ユーザー フローを持つワイン レビュー Web アプリがあります: http://5buckchuck.com/

ワインの種類 > ワイン リスト > ワインの詳細 > ワインのレビュー (django backto 経由でリダイレクト) > レビューから更新されたワインの詳細

私がやりたいことは、ユーザーが戻るボタンを押したときにワインリストに戻ることです。現在起こっていることは、Wine Detail ビューがリロードされることです。ワイン リストに戻るには 3 回戻る必要があります。:-(

これを解決するための私の考えは2つでした：

  1. 履歴スタックの最後の項目が Wine Review だった場合、履歴スタックの最後の 3 つの項目をスプライスします。最後の履歴オブジェクトをイントロスペクトして pageURL を取得するのに苦労しました。ただし、このソリューションは少し壊れやすいと感じています。

    var last_hist = $.mobile.urlHistory.getActive();
last_hist.data.pageURL;

  2. 2 番目の考えは、戻るボタンの動作をオーバーライドして、Wine Detail ビューの戻るボタンが常に Wine リスト ビューに戻るようにすることでした。

    $('div#wine_detail').live('pageshow',function(event, ui){      
  $("a.ui-btn-left").bind("click", function(){
    location.replace("/wines/{{wine.wine_type}}/#");
  });   
});

おそらくこれを行うためのより良い方法がありますが、私は少しアイデアがありません。

更新: したがって、私はこれをハッキングし続けていますが、結果はやや無視できます。私が見つけたのは、これが私が基本的に作業する必要があるものであるということでした:window.history.go(-3)

コンソールから、まさに私が必要とすることを行います。

だから私はそれを次のように戻るボタンにバインドしようとしました:

$('div#wine_detail').live('pageshow',function(event, ui){
  var last = $.mobile.urlHistory.stack.length - 1;
  var last_url = $.mobile.urlHistory.stack[last].url;
  var review_url = /review/g;
   if (last_url.match(review_url) )
     {
       $('div#wine_detail a.ui-btn-left').bind( 'click', function( ) {  
         console.log("click should be bound and going back in time...")
         window.history.go(-2);
         });
   }
   else
   {
     console.log('err nope its: ' + last_url);
   }
 });

サイコロはありません。何かがトランザクションを中断しています...

4

6 に答える 6

3

urlHistoryでスプライス/ポップ/プッシュしたくない。このようにpagebeforechangeでリダイレクトするのはどうですか？

$(document).on("pagebeforechange", function (e, data) {

    var overrideToPage;

    // some for-loop to go through the urlHistory TOP>DOWN
    for (var i = $.mobile.urlHistory.activeIndex - 1; i >= 0; i--) {
        // this checks if # = your target id. You probably need to adapt this;
        if ($.mobile.urlHistory.stack[i].url = $('#yourPageId').attr('id')) {
            // save and break
            overrideToPage = $.mobile.urlHistory.stack[i].url;
            break;
        }
        // set new Page
        data.toPage = overrideToPage;
    }
});

これにより、戻るボタンのchangePage呼び出しがキャプチャされ、目的のページにリダイレクトされます。もちろん、 data.toPage=winelistを直接設定することもできます。

私はこれを#internalページでのみ行っていますが、winelist.htmlなどでこれを設定するのはそれほど難しいことではありません。

詳細については、JQMドキュメントのイベントページを確認してください

于 2012-04-22T08:22:48.247 に答える
2

ページのヘッダー セクションに [戻る] ボタンを配置しないのはなぜですか? このようなもの：

<div data-role="header">
    <a data-direction="reverse" data-role="button" href="#winelist" data-icon="back">Back</a>
    <h1>Wine Detail</h1>
</div><!-- /header -->
于 2012-07-02T11:57:34.227 に答える
1

私も最近これと格闘しました。それについて考えた後、JQM アプリケーションを書き直して、自分の履歴に含めたくないページにポップアップ「ウィンドウ」を使用できることに気付きました。これは、ブラウザの履歴をいじるよりも簡単でクリーンな修正でした.

これで、ユーザーはブラウザーの戻るボタンを直感的に使用できるようになり、アプリケーションの戻るボタンをコーディングする必要がなくなりました。

確認する必要がある唯一のことは、ポップアップ自体がブラウザーの履歴に含まれないことです。そのため、次のように「履歴」オプションを必ず false に設定してください。

$('#some_popup').popup( { history: false } );
于 2016-09-09T21:10:01.650 に答える
0

さて、解決策は私が投稿した更新に近いものでした。以前の解決策の問題は、「戻る」ボタンにバインドされているものがたくさんあることでした。私の新しいバインドアクションが時々機能していたかもしれませんが、他のアクションも実行されるでしょう、私は試しunbind()ましたが、それでも機能しませんでした。

私の解決策は少し煙と鏡です。前のページがレビューページであるかどうかを確認し、そうである場合は、古い戻るボタンを新しいフェイクボタンに交換して、次のように履歴の戻る手順を実行します。

$('div#wine_detail').live('pageshow',function(event, ui){
  var last = $.mobile.urlHistory.stack.length - 1;
  var last_url = $.mobile.urlHistory.stack[last].url;
  var review_url = /review/g;
  if (last_url.match(review_url) )
    {
      $('a.ui-btn-left').replaceWith('<a href="" id="time_machine" class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Back</span><span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span></span></a>');

      $('#time_machine').bind( 'click', function( ) {  
        console.log("click should be bound and going back in time...")
        window.history.go(-3);
        });
    }
  else
    {
      console.log('err nope its: ' + last_url);
    }

見た目はまったく同じで、賢い人は誰もいません。jQmメソッドを使用することでおそらく改善される可能性があるpagebeforeshowため、ユーザーはスワップを確認できません。これが誰かを助けることを願っています。

于 2012-05-05T23:00:27.123 に答える
0

閉じるボタンで任意の (最後のページではない) ページを参照する必要がある場合は、最初にターゲット ページに変更し、後でダイアログを開くこともできます。したがって、ダイアログの閉じるボタンでターゲット ページが開きます。

// First: change to the target page
$.mobile.changePage('#target_page');

その後、このようなダイアログを開きます。

// Second: change to the dialog 
window.setTimeout(
   // for some reason you have to wrap it in a timeout  
   function(){
      $.mobile.changePage('#dialog');
   },
   1
);

これでダイアログを開くことができ、閉じるボタンで #target_page が開きます。

利点:

  • ソリューションは、すべてのダイアログからすべての閉じるボタンを削除するのではなく、単一のダイアログで機能します
  • コードの単一ポイントでのシームレスな統合
  • 履歴操作は必要ありません
于 2012-09-20T10:06:03.167 に答える
-1

jquery mobile を使用する前に同様の問題を見たことがあり、ドキュメントで対処されています。「ページの最初に」Javascriptを設定するときは、readyの代わりにpageinitを使用するか、場合によってはpageshowを使用してください。これにより、履歴キューを回避することなく問題が解決されると思います。

于 2013-04-26T02:47:09.973 に答える