我们正在使用 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() 事件,但是这些根本就没有被调用。
非常感谢您的帮助。
最佳答案
是的,当您的每个 <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文件并将其包含在每一页上。这样,如果用户刷新浏览器或深层链接到您的网站,他们将获得您希望他们拥有的体验的所有代码。
文档:
关于单页模板中的 JQuery Mobile Ajax 导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7741888/