JQM页面id和data-url

Question

页面id和data-url属性之间的关系是什么？有没有什么关系。可以更改data-url属性吗？

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

还有，有人能解释一下JQM是如何使用页面id和data-url的吗？提前谢谢。

Answer 1

data-url属性用于跟踪页面元素的来源。如果没有显式设置，则嵌入在主应用程序文档中的所有页面都具有等于页面id的data-url属性。唯一的例外是文档中的第一页。当您请求一个页面时，jQuery移动设备首先会尝试在DOM中查找具有匹配data-url的页面。如果没有找到这样的页面，则执行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()之前，检查DOM中是否存在data-url等于第二个页面id的页面，并手动删除它。

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