Question

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

使用单页模板可以实现基于Ajax的页面导航吗？（如这里提到的： http://jquerymobile.com/demos/1.0rc1/docs/pages/page-template.html）

我保留$ .mobile.ajaxEnabled = true;并且使用简单我能够导航到应用程序的不同“单页”。我在新页面中做了很少的事件绑定（我们通常在$（document）.ready（）中执行jQuery事件，我尝试使用pageinit，jQueryMobile的pageshow事件以及Ready（）事件，但这些根本就没有被召唤。

非常感谢您的帮助。

Answer 1

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

确保使用.delegate()或.live()绑定事件处理程序，因为绑定的元素在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

Answer 2

您可以使用普通链接链接第二个单页，如此处所述

http://jquerymobile.com/demos/1.0rc1/docs/pages/page-links.html

或者，您可以使用changePage实用程序强制页面加载

$.mobile.changePage( 'secondPage.html', 'slide' );

这里记录了

http://jquerymobile.com/test/docs/api/methods.html

单页模板中的JQuery Mobile Ajax导航

2 个答案: