如何修改 jQuery 移动历史后退按钮行为 [英] How to modify jQuery mobile history Back Button behavior

问题描述

我将从我研究过的开始，但没有解决方案可以解决看起来应该是简单的 JQM 修改的问题.

I'll start this off with I have researched a bit, but no solution that solves what seems like it should be a simple JQM modification.

我有一个 wine review webapp，它具有以下视图用户流程:http://5buckchuck.com/

I have a wine review webapp that has the following view user flow: http://5buckchuck.com/

Wine type > Wine list > Wine Details > Wine review (redirect via django backto ) > Wine Details 通过review更新

Wine type > Wine list > Wine Details > Wine review (redirect via django backto ) > Wine Details updated from review

我想要发生的是当用户按下后退按钮时，它应该返回到酒单.当前发生的是重新加载 Wine Detail 视图.返回酒单需要按三下.:-(

What I want to happen is when the user presses the back button it should go back to the wine list. What currently happens is the the Wine Detail view is reloaded. It takes pressing back three times to get back to the Wine List. :-(

我解决这个问题的想法有两个:

My thoughts to solve this were two:

1. 如果历史堆栈中的最后一个项目是 Wine Review，则拼接历史堆栈中的最后 3 个项目.我很难反省最后一个历史对象以获取 pageURL.我觉得这个解决方案有点太脆弱了.

1. Splice the last 3 items from the history stack, if the last items in the history stack was Wine Review. I had a hard time trying to introspect the last history object to get the pageURL. I have a feeling that this solution is a bit too fragile though.

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

第二个想法是覆盖后退按钮行为，以便 Wine Detail 视图中的后退按钮始终返回到 Wine 列表视图

The second thought was to override the back button behavior so that the back button from the Wine Detail view would always go back to the Wine list view

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

可能有更好的方法来做到这一点，但我有点想不通了.

There is probably a better way to do this, but I'm a bit out of ideas.

更新:所以我继续破解这个问题，结果几乎可以忽略不计.我发现这是我基本上需要做的事情:window.history.go(-3)

Update: So I continue to hack on this with somewhat negligible results. On thing I have found was this is what I basically need to work: window.history.go(-3)

从控制台它完全符合我的需要.

from the console it does exactly what I need.

所以我尝试将它绑定到后退按钮，如下所示:

So I tried binding it the the back button like such:

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

没有骰子，有东西打断了交易......

No dice, something interupts the transaction...

推荐答案

好的，所以解决方案接近我发布的更新.以前的解决方案的问题是有很多东西绑定到后退"按钮.虽然我的新绑定操作有时可能会起作用，但其他操作也会发生，我尝试了 unbind() 但仍然没有工作.

Okay so the solution was close to the update I posted. The issue with the previous solution was that there were to many things bind-ed to the "Back" button. While my new bind action may have been working sometimes, the other actions would take place too, I tried unbind() but still no worky.

我的解决方案有点像雾里看花.我检查上一页是否是评论页面，如果是，我将旧的后退按钮换成新的人造按钮，并带有历史后退步骤，如下所示:

My solution is a bit of smoke and mirrors. I check to see if the the previous page was the review page and then if so, I swap out the old back button for my new faux button with the history back step like so:

$('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 来改进，因此用户永远看不到交换.希望这对某人有所帮助.

It looks exactly the same, and no one is the wiser. it could probably be improved by using the the jQm method pagebeforeshow so user could never see the swap. Hope this helps someone.

这篇关于如何修改 jQuery 移动历史后退按钮行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！