4

任何人都可以更多地了解 jQuery Mobile 中的“data-url”属性吗？目前我阅读了文档，我发现它太混乱了，是否有工作演示或其他东西。

请避免从 jQuery 移动网站复制粘贴内容，它绝对可以帮助其他人在相同的困惑状态下寻找相同的内容，就像我一样。

4

2 回答 2

8

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

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

data-url 是您放置在 jQM 页面上以启用 Ajax 导航的属性。当您单击链接时，jQM 导航将首先在页面上查找匹配的 data-url 属性。例如，如果您浏览到 URL 为“example-host/some/path#/features/123”的启用 jQM 的页面，jQuery Mobile 将首先在当前文档中查找具有属性的 jQM 页面data-url="/features/123"。如果找到它，则隐藏当前 jQM 页面并显示它找到的页面。如果它没有找到它，那么它会尝试对 URL“example-host/features/123”的 Ajax 请求，如果它找到一个有效页面，则将内容作为另一个 jQM 页面加载。

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

页面剖析

jQM 页面模型

于 2012-01-13T14:34:08.797 回答
3

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

假设用户导航到/store/youraccount但他们没有登录。您的服务器可能会将他们重定向到登录页面/store/login。这会以 301 重定向的形式返回浏览器，即使 jQuery Mobile 不知道更改也不会加载该重定向。该页面将正确显示，但顶部的 URL 仍然是store/youraccount.

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

如何data-url停止<form>断裂：

如果您的页面包含一个<form>没有属性定义的标签，action那么默认行为是回发到当前页面 - 是的，您猜对了，浏览器仍然认为我们在/store/youraccount

所以当你把data-url='/store/login它正确地更新URL。

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

注意：即使您的表单有一个，action您仍然需要设置 data-url。这只是一个例子，展示了离开 data-url 如何破坏事情。

于 2014-04-14T22:34:18.547 回答