3

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

基本上，我有三个页面：

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

记录页面是根据表格和记录 ID 动态创建的，每次选择新记录时都会附加到文档正文中。

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

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

关于为什么会这样的任何解释？谢谢您的帮助。

4

2 回答 2

2

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

问题：

  1. 无法将任何不指向真实 .html 页面的页面更改保存到历史记录。因此，在动态页面之间弹跳已经过时了。
  2. 我需要一种方法将我的数据传递到将保留在历史记录中的 .html 页面，因此我使用了 url 中的序列化字符串，例如 GET 字符串。和这里类似，但是一个不同的，更短的，更干净的我找不到链接 - 抱歉！（如何在 JavaScript 中获取查询字符串值？）
  3. .html 页面必须不同并在彼此之间交换，以便页面重新加载并触发页面更改事件侦听器。

现在 html 页面已存储，并具有在单击返回时重绘自身所需的所有信息。

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

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

#3 的代码：

// 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);
}
于 2013-04-04T21:45:58.963 回答
2

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

工作演示

$('.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
 });
});
于 2013-04-04T21:33:02.117 回答