如何修改jQuery手机历史Back Button行为 [英] How to modify jQuery mobile history Back Button behavior

问题描述

我会从这开始研究一下，但是解决方案似乎并不是一个简单的JQM修改。

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

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

我想要发生的是当用户按下后退按钮时，应该回到酒单。目前发生的是Wine Detail视图被重新加载。它需要三次退回到酒单。 ： - （

我想解决的是两个：

1. 从历史堆栈中剪辑最后3个项目，如果历史堆栈中的最后一个项目是Wine Review，我很难想到最后一个历史对象来获取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）

从控制台它完全正是我需要的。

所以我尝试绑定这样的后退按钮：

$ pre> $ code $（'div＃wine_detail'）。 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在时间...）
window.history.go（-2）;
}）;
}
else
{
console.log （'err nope its：'+ last_url）;
}
}）;

没有骰子，事情发生了一些事情...

解决方案

好的，所以解决方案是接近我发布的更新。以前的解决方案的问题是有很多事情绑定到后退按钮。虽然我的新绑定操作有时可能已经工作，但其他操作也会发生，我尝试 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_machineclass =ui-btn-left ui-btn ui-btn- icon-left ui-btn-corner-all ui-shadow ui-btn-up-adata-icon =arrow-l>< span class =ui-btn-inner ui-btn-corner-all >< span class =ui-btn-text>返回< / span>< span class =ui-icon ui-icon-arrow-l ui-icon-shadow>< / span> ;< / span>< / a>'）; 
 
 $（'＃time_machine'）bind（'click'，function（）{
 console.log应该束缚并及时回归...） 
 window.history.go（-3）; 
}）; 
} 
 else 
 {
 console.log（'err nope its：'+ last_url）; 
} 
  

看起来完全一样，没有人是更聪明的人。可能通过使用jQm方法 pagebeforeshow 可以改善用户永远不会看到交换。希望这有助于某人。

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.

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 updated from review

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. 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;
   

2. 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.

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...

解决方案

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

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手机历史Back Button行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！