如何修改jQuery移动历史记录Back Button行为

Question

我会开始研究一下,但没有解决方案可以解决看起来应该是一个简单的JQM修改.

我有一个葡萄酒评论webapp,具有以下视图用户流程:http: //5buckchuck.com/

葡萄酒类型>酒单>葡萄酒详情>葡萄酒评论(通过django backto重定向)>葡萄酒详细信息从评论更新

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

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

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

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

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);
   }
 });

没有骰子,有些东西会中断交易......

Answer 1

好的，解决方案接近我发布的更新。先前解决方案的问题在于，有很多东西绑定到“后退”按钮。虽然我的新绑定操作有时可能有效，但其他操作也会发生，我尝试过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这样用户就永远看不到交换。希望这对某人有帮助。