“data-url”jQuery Mobile令人困惑

Question

任何人都可以对jQuery Mobile中的“data-url”属性有所了解吗？我现在读到了documentation我发现它太混乱了没有任何工作演示或东西。

请避免复制粘贴jQuery移动网站上的内容，这绝对有帮助 还有一些人像我一样在同样的混乱状态中寻找相同的东西。

Answer 1

您正在查看文档的相当旧的链接。最新版本的文档提供了有关data-url属性用途的更多信息。您可以通过以下链接查看相关页面上的新1.0版本：http://jquerymobile.com/demos/1.0/docs/pages/page-navmodel.html

我真的相信文档，特别是1.0文档，会更好地解释这一点，但无论如何我都会尝试：为了真正理解data-url属性，你需要了解结合所有的jQuery Mobile模型您的HTML页面为您的移动网站的单个HTML文档。这些页面通常懒惰地加载到同一文档中。当您在页面上加载jQuery Mobile导航到HTML文档时，将解析HTML，并且只显示一个“页面”。

data-url是您放在jQM页面上以启用Ajax导航的属性。当您单击链接时，jQM导航将首先在页面上查找匹配的data-url属性。例如，如果您浏览到具有URL“example-host / some / path＃/ features / 123”的启用了jQM的页面，jQuery Mobile将首先查看当前文档以查找具有属性{{的jQM页面。 1}}。如果找到它，则它会隐藏当前的jQM页面并显示它找到的页面。如果找不到它，则会尝试向URL“example-host / features / 123”发出Ajax请求，如果找到有效页面，则将内容加载到另一个jQM页面中。

这些jQM文档链接应该提供进一步的帮助：

Anatomy of a Page

jQM Page Model

Answer 2

data-url还有一个非常重要的用例 - 在重定向期间：

我们假设用户导航到/store/youraccount，但他们尚未登录。 您的服务器可能会将它们重定向到登录页面/store/login。这回到浏览器作为301重定向，在没有jQuery Mobile的情况下加载甚至知道更改。页面将正确显示，但顶部的网址仍为store/youraccount。

通过在登录页面上设置data-url，jQuery mobile可以在重定向后正确更新URL，这意味着它可以加入书签，并且<form>标签没有指定action将起作用。

data-url如何阻止<form>突破：

如果您的网页包含<form>标签而没有action属性，则默认行为是回发到当前页面 - 是的，您猜对了浏览器仍然认为我们已经开始/store/youraccount

因此，当您放置data-url='/store/login时，它可以正确更新网址。

<div data-role="page" data-url="/store/login" 
     class="ui-page ui-body-c ui-page-active" id="page_">

注意：即使您的表单有action，您仍需要设置data-url。这只是一个示例，说明如何不使用data-url可以破坏事物。