jQuery Mobile：按下后退按钮时清除页面

Question

我正在开发一个混合应用程序，它有很多“顺序”页面（例如：主页 -> 第 1 页 -> 第 2 页 -> 第 3 页）。所有这些页面都在标头 data-add-back-btn=true 中设置，它们通过 AJAX 加载数据。问题是，当我按下后退按钮时，我想清除页面的内容，因为当我再次进入该页面时，它会显示以前的数据，直到加载了新数据。我试过了：

$('#page_one').on('pagebeforechange', function(){
    //clear
    //reload ajax
}

但是当页面被调用时它可以正常工作，而且当我从 page_two 返回该页面时也是如此。我想在 Android 中使用类似 onDestroy() 的东西。存在吗？

非常感谢。

Answer 1

你需要利用两个事件

1. navigate 确定用户是使用 jQM 后退按钮 data-rel="back" 还是浏览器的后退按钮导航返回。

   var direction = "";
   
   $(window).on("navigate", function (e, data) {
      direction = data.state.direction == "back" ? true : false;
   });
   

2. pagebeforechange (jQM pagecontainerbeforechange (jQM >= 1.4)。无论是否使用后退按钮，此事件都将返回您正在导航的页面的对象.toPage。在他的阶段，你可以替换toPage的内容。

   $(document).on("pagecontainerbeforechange", function (e, data) {
       if (direction && $.type(data.toPage) == "object") {
           /* do your magic here */
           $(".ui-content", data.toPage).append("<p>Back button was hit</p>");
           /* don't forget to reset direction var */
           direction = false;
       }
   });
   

Demo