单页模板中的 JQuery Mobile Ajax 导航

Question

我们正在使用 RC1 + ASP.NET MVC3 开发 JQuery Mobile 应用程序。我的问题是:

是否可以使用单页面模板进行基于 Ajax 的页面导航？ (正如这里提到的: http://jquerymobile.com/demos/1.0rc1/docs/pages/page-template.html )

我保留 $.mobile.ajaxEnabled = true;并使用简单的方法，我可以导航到应用程序的不同“单页”。我在新页面中几乎没有事件绑定(bind)(我们通常在 jQuery 的 $(document).ready())事件中完成，我尝试使用 jQueryMobile 的 pageinit、pageshow 事件以及 Ready() 事件，但是这些根本就没有被调用。

非常感谢您的帮助。

Answer 1

是的，当您的每个 <div data-role="page"> 时，支持基于 AJAX 的页面导航。元素位于不同的页面上。在导航上，jQuery Mobile 只会找到第一个 <div data-role="page">页面上的元素，将其添加到当前 DOM，然后将其动画化到 View 中。

确保您使用的是.delegate()或.live()绑定(bind)您的事件处理程序，因为您要绑定(bind)的元素在用户导航到它们之前并不存在于 DOM 中。这是一个例子:

$(document).delegate('[data-role="page"]', 'pageshow', function () {
    alert(this.id + ' --> pageshow');
});

如果您使用的 PushState 功能会更新 URL 以不包含哈希值(例如，将 www.mywebsite.com/index.html#/dir1/page2.html 更改为 www.mywebsite.com/dir1/page2.html )我建议在外部 .js 中编写所有自定义 JavaScript文件并将其包含在每一页上。这样，如果用户刷新浏览器或深层链接到您的网站，他们将获得您希望他们拥有的体验的所有代码。

文档:

• 代表:http://api.jquery.com/delegate