JQM page id and data-url

Question

页面id和data-url属性之间是什么关系?有什么关系吗?是否可以更改data-url属性

我的问题是，有一个页面，我通过使用changePage参数。我还在changePage中指定了data-url。转到该页后，如果我手动刷新该页，则会添加一个新页，因为该页的data-url不同。也就是说，data-url与页面id相同。希望我说得很清楚。我应该怎么做，以便在手动刷新页面时页面被替换。

还有，谁能解释一下JQM是如何使用page id和data-url的?

Answer 1

data-url属性用于跟踪页面元素的起源。如果没有显式设置，则嵌入在主应用程序文档中的页面的data-url属性都等于页面id。唯一的例外是文档的第一页。当您请求一个页面时，jQuery Mobile首先尝试在DOM中找到一个具有匹配data-url的页面。如果没有找到这样的页面，则执行Ajax请求并在DOM中加载新页面。

你可以使用以下三种方法之一来解决这个问题:

当您移动到另一个页面时，使用下面的代码从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();
}