jquery-mobile - JQM 页面 id 和 data-url

Question

page id 和 data-url 属性之间的关系是什么。有没有关系。更改 data-url 属性是否可以。

我的问题是有一个页面，我使用 changePage 将参数传递到该页面。我还在 changePage 中指定了 data-url。转到该页面后，如果我手动刷新页面，则会添加一个新页面，因为该页面的数据 url 不同。也就是说，data-url 与页面 id 相同。希望这很清楚。我应该怎么做才能在手动刷新页面期间替换页面。

而且，有人可以解释一下 JQM 如何使用页面 id 和 data-url。提前致谢。

Answer 1

data-url属性用于跟踪页面元素的来源。如果未明确设置，则嵌入在主应用程序文档中的页面都有其data-url属性等于页面id .唯一的异常(exception)是文档的第一页。当您请求页面时，jQuery Mobile 首先尝试定位具有匹配 data-url 的页面。在 DOM 中。如果它没有找到这样的页面，那么它会执行一个 Ajax 请求并在 DOM 中加载新页面。

您可以使用以下 3 种方法之一解决问题:

当您移动到另一个页面时，使用以下代码从 DOM 中删除第二个页面。

$(document).on('pagehide', '#second-page', function(event, ui){
    $(event.target).remove();
});

这样当您移动到第一页时，第二页将从 DOM 中删除，您的问题将得到解决。

或 :

用:

$.mobile.changePage('car-details.html', {
    data: {
        id: this.id
    }
});

不使用 dataUrl环境。

这将创建一个 URL:../car-details.html?id=my_val

刷新时 URL 保持不变，因此您仍然可以获取参数和 data-url与页面 ID 相同。

或

之前 changePage()检查是否有 data-url 的页面等于第二个页面的 id 存在于 DOM 中并手动删除它。

if ($("#second-page-id").length > 0 && $("#second-page-id").attr("data-url") === 'second-page-id' ) {
    console.log('remove from DOM');
    $("#second-page-id").remove();
}