javascript - 如何修改 jQuery Mobile 历史后退按钮行为

Question

我会从我已经研究了一点开始，但没有解决方案似乎应该是一个简单的 JQM 修改。

我有一个 Wine 评论网络应用程序，它具有以下 View 用户流程: http://5buckchuck.com/

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

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

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

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

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

2. 第二个想法是重写后退按钮的行为，以便 Wine 详细信息 View 中的后退按钮始终返回到 Wine ListView

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

在控制台中，它完全满足了我的需要。

所以我尝试像这样将它绑定(bind)到后退按钮:

$('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

我不希望与 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 中的事件页面 docs