"data-url“jQuery移动端令人困惑

Question

有没有人能更多地介绍一下jQuery手机中的"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移动模型，该模型将您的所有HTML页组合成一个用于移动网站的HTML文档。这些页面通常懒惰地加载到同一文档中。当您在页面上加载文档时，jQuery将被解析，并且只会显示一个“页面”。

data-url是为了启用Ajax导航而放在jQM页面上的属性。当您单击一个链接时，jQM导航将首先在页面上查找匹配的数据url属性。例如，如果您浏览到启用了jQM的页面，该页面的URL为"example-host/some/path#/features/123"，jQuery Mobile将首先在当前文档中查找具有data-url="/features/123"属性的jQM页面。如果找到，则隐藏当前的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手机甚至不知道更改的情况下加载的。页面将正确显示，但顶部的URL仍为store/youraccount。

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

data-url如何阻止<form>中断：

如果您的页面包含未定义action属性的<form>标记，则默认行为是回发到当前页面-是的，您猜对了，浏览器仍然认为我们使用的是/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，你仍然需要设置数据url。THis只是一个例子，用来说明去掉data-url会造成多大的破坏。