web-dev-qa-db-ja.com

jQueryモバイル履歴を変更する方法戻るボタンの動作

これは少し調査したところから始めますが、単純なJQMの変更であると思われるものを解決するソリューションはありません。

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

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

私がしたいのは、ユーザーが戻るボタンを押すと、ワインリストに戻る必要があるということです。現在発生しているのは、ワインの詳細ビューが再読み込みされることです。ワインリストに戻るには、3回押し戻す必要があります。 :-(

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

  1. 履歴スタックの最後のアイテムがWineReviewの場合は、履歴スタックの最後の3つのアイテムをスプライスします。最後の履歴オブジェクトをイントロスペクトしてpageURLを取得するのに苦労しました。しかし、この解決策は少し壊れやすいと感じています。

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

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

    _$('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);
   }
 });
_

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

javascriptdjangojquery-mobilebrowser-history
13
bmartinek

さて、解決策は私が投稿した更新に近いものでした。以前の解決策の問題は、「戻る」ボタンにバインドされたものがたくさんあることでした。新しいバインドアクションが時々機能していたかもしれませんが、他のアクションも実行されます。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を使用することで改善できるため、ユーザーはスワップを確認できません。これが誰かを助けることを願っています。

0
bmartinek

UrlHistoryでスプライス/ポップ/プッシュしたくない。このように変更前のページでリダイレクトするのはどうですか？

$(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のイベントページを確認してください docs

3
frequent

ページのヘッダーセクションに戻るボタンを付けてみませんか？このようなもの：

<div data-role="header">
    <a data-direction="reverse" data-role="button" href="#winelist" data-icon="back">Back</a>
    <h1>Wine Detail</h1>
</div><!-- /header -->
2
jtsnr

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

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

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

$('#some_popup').popup( { history: false } );
1
Cosmacelf

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

// 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が開きます。

利点：

  • ソリューションは、すべてのダイアログからすべての閉じるボタンを削除するのではなく、単一のダイアログで機能します
  • 単一のコードポイントでのシームレスな統合
  • 履歴操作は必要ありません
0
stot