Question

我在jquery移动应用程序中向后移动历史堆栈时遇到问题。

基本上，我有三页：

搜索表单（带有页面角色的预建div。限制导航：仅限结果列表页面）
结果列表（带有页面角色的预建div，通过ajax添加结果信息。可以导航到任何记录页面）
记录页面（完全动态构建。对相关记录页面的无限导航可能性）

记录页面是根据每次选择新记录时附加到文档正文的表和record_id动态创建的。

var page_id = table + record_id;
var pg_html = newPageHTML(page_id );
$('body').append(pg_html);
$.mobile.changePage($("#" + page_id));

在前进到记录并按下“后退”按钮（data-rel =“后退”）后，预期的行为将是返回上一页，无论是另一条记录还是结果列表，但我发送了一直回到搜索表单。当我使用data-dom-cache =“true”时，以及当我不使用时，会发生这种情况。

有关为何会这样做的任何解释？谢谢你的帮助。

Answer 1

获取DOM中上一页的ID，然后移至它。

<强> Working Demo

$('.selector').on('click', function() {

 // get the ID of the previous page
 var previous = '#' + $.mobile.activePage.prev('div[data-role="page"]')[0].id;

 // move to previous page with reverse effect
 $.mobile.changePage(previous, {
  transition: 'slide',
  reverse: true
 });
});

Answer 2

好吧，这就是我修复它的方法。虽然我不会选择这个作为答案，因为它远离我希望它的工作方式，并且看起来非常复杂。

问题：

无法将任何页面更改保存到未指向真实.html页面的历史记录中。所以在动态页面之间蹦蹦跳跳。
我需要一种方法将我的数据传递到保留在历史记录中的.html页面，所以我使用了URL中的序列化字符串，就像GET字符串一样。与此类似，但是一个不同的，更短的，更清洁的一个我找不到链接 - 抱歉！（How can I get query string values in JavaScript?）
.html页面必须不同并相互交换，以便页面重新加载并触发页面更改事件侦听器。

现在存储html页面并拥有在点击后重绘自己所需的所有信息。

＃2的代码（不是我的代码，非常感谢编写它的人）：

$.urlParam = function(name){
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return results[1] || 0;
}

// change page
if($('.ui-page-active').attr('id') == "record-a"){
    $.mobile.changePage("p-record-b.html?table=" + content_type + "&id=" + record_id);
}else if($('.ui-page-active').attr('id') == "record-b"){
    $.mobile.changePage("p-record-a.html?table=" + content_type + "&id=" + record_id);
}else{
    $.mobile.changePage("p-record-a.html?table=" + content_type + "&id=" + record_id);
}

JQuery Mobile：在动态页面生成中使用'data-rel =“back”'

2 个答案: