13

我将首先进行一些研究，但是没有解决方案可以解决看起来应该是简单的 JQM 修改的问题。

我有一个葡萄酒评论网络应用程序，它具有以下视图用户流程：http: //5buckchuck.com/

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

我想要发生的是当用户按下后退按钮时它应该回到酒单。当前发生的是 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);
   }
 });

没有骰子，有什么东西打断了交易……

4

6 回答 6

3

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

于 2012-04-22T08:22:48.247 回答
2

为什么页面的标题部分没有后退按钮？像这样的东西：

<div data-role="header">
    <a data-direction="reverse" data-role="button" href="#winelist" data-icon="back">Back</a>
    <h1>Wine Detail</h1>
</div><!-- /header -->
于 2012-07-02T11:57:34.227 回答
1

我最近也为此苦苦挣扎。在考虑之后，我意识到我可以重写我的 JQM 应用程序，以便为那些我不希望出现在我的历史记录中的页面使用弹出“窗口”。这最终是一个比浏览器历史记录更容易和更清洁的修复。

现在用户可以直观地使用浏览器的后退按钮，而我不必编写应用程序后退按钮。

您唯一需要确保的是弹出窗口本身不会进入浏览器历史记录，因此请确保将“历史记录”选项设置为 false，如下所示：

$('#some_popup').popup( { history: false } );
于 2016-09-09T21:10:01.650 回答
0

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

于 2012-05-05T23:00:27.123 回答
0

如果您希望关闭按钮指向任意（不是最后一个）页面，您也可以先更改为目标页面，然后再打开对话框。因此对话框中的关闭按钮将打开目标页面。

// 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。

好处：

  • 解决方案适用于单个对话框，而不是从所有对话框中删除所有关闭按钮
  • 在单点代码上无缝集成
  • 不需要历史操作
于 2012-09-20T10:06:03.167 回答
-1

我之前在使用 jquery mobile 时看到过类似的问题，并且在文档中得到了解决。在“页面开头”设置 Javascript 时，请使用 pageinit 而不是 ready 或在您的情况下使用 pageshow。我认为这将解决您的问题，而无需解决历史队列。

于 2013-04-26T02:47:09.973 回答