jQuery Mobile的阿贾克斯导航单页模板 [英] JQuery Mobile Ajax Navigation in Single-Page Template
问题描述
我们正在开发使用RC1 + ASP.NET MVC3 jQuery Mobile的应用程序。
我的问题是：
We are developing JQuery Mobile app using RC1 + ASP.NET MVC3. My question is:
是基于Ajax的页面导航可以使用单页模板？ （这里提到：
http://jquerymobile.com/demos/1.0rc1/docs/pages /page-template.html ）
Is Ajax based page navigation possible using single page template? (as mentioned here: http://jquerymobile.com/demos/1.0rc1/docs/pages/page-template.html )
我保持$ .mobile.ajaxEnabled = TRUE;并且使用简单，我能够导航到不同的单页的应用。我有几个事件绑定在新的页面（即我们通常做的$（document）。就绪（））jQuery的事件，我试图用pageinit，jQueryMobile的pageshow事件以及准备就绪（）事件工作要做，但这些根本不被调用。
I am keeping $.mobile.ajaxEnabled = true; and using simple I am able to navigate to different "Single page" of application. I have few event binding to be done in new page (which we usually do in $(document).ready()) event of jQuery, I tried to use pageinit, pageshow events of jQueryMobile as well as Ready() event, but these are simply not being called.
许多感谢您的任何帮助。
Many Thanks for any helps.
推荐答案
是基于AJAX的页面导航的支持时，你的每一个＆LT; DIV数据角色=页面＆GT; 元素都在不同的页面。在导航，jQuery Mobile的只能找到第一个＆LT; DIV数据角色=页面＆gt;在页面上元素，将其添加到当前的DOM，然后动画它进入视野。
Yes AJAX based page navigation is supported when each of your <div data-role="page"> elements are on different pages. On navigation, jQuery Mobile will find only the first <div data-role="page"> element on the page, add it to the current DOM, and then animate it into view.
请确保您使用的是 .delegate（）或 .live（）绑定，因为你的事件处理程序您元素结合到不在DOM直到用户导航到他们存在。这里有一个例子：
Make sure you are using .delegate() or .live() to bind your event handlers since the elements you are binding-to do not exist in the DOM until the user navigates to them. Here's an example:
$(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~~V ）我会建议在外部的.js 文件写入所有的自定义JavaScript和包括它的每一页上。这样，如果一个用户刷新浏览器或深层链接到你的网站，他们会得到所有的code你希望他们有丰富的经验。
If you are using the pushState feature that updates the URL to not include the hashes (e.g. www.mywebsite.com/index.html#/dir1/page2.html changes to www.mywebsite.com/dir1/page2.html) I would recommend writing all your custom JavaScript in an external .js file and including it on every page. This way if a user refreshes the browser or deep-links into your site they will get all the code for the experience you want them to have.
文件：
- Delegate: http://api.jquery.com/delegate
这篇关于jQuery Mobile的阿贾克斯导航单页模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
