JQuery Mobile Ajax Navigation in Single-Page Templ

问题:

We are developing JQuery Mobile app using RC1 + ASP.NET MVC3. My question is:

Is Ajax based page navigation possible using single page template? (as mentioned here: http://jquerymobile.com/demos/1.0rc1/docs/pages/page-template.html )

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.

回答1:

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.

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');
});

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.

Documentation:

• Delegate: http://api.jquery.com/delegate

回答2:

You can link the second single page using a normal link, as explained here

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

Alternatively you can force a page loading using the changePage utility

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

which is documented here

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