Proposal: $.mobile.pageTransitionFilter
One common issue I've been hitting again and again is how to work with jQM's default click handling when you want to interface directly with a rest api. jQM's default page handling framework (where it expects jQM style HTML from the server) is great for lots of projects -- making it easy to bootstrap, but it becomes a burden for other things like Phonegap style apps where we have limits around how we deploy (i.e., localizing all html pages vs. accessing them remotely). In Phonegap's case, you will likely need to store all of your html on the packaged app rather than access them remotely for two reasons 1) jQM's default click handler will treat remote pages as external pages due to the cross-domain nature and 2) the App Store(s) are likely to turn down apps that access pages remotely. Unfortunately, jQM's current page handling makes it difficult to support interacting with rest apis (that return json) and dynamically constructing pages from templates.
I've been experimenting with a few different strategies to work around jqm's default click handling. One strategy I use is to use href="#" on all pages where I want to get json data and render html through js. I do this by binding my own click handler to these type of links (since jQM ignores links with href="#"). This works fine, but part of this strategy is defining how to handle page transitions and history -- employing $.mobile.changePage in my custom click handler solves this issue. Along with defining a custom click handler, you also have to define a custom onload handler to account for times when a user might navigate to that page directly. In short, I've recreated jQM's page handler to support my json data based page rendering. This feels strange and hackish.
Another strategy I'm experimenting with is just going with the default jQM click handler then binding my json/template resolution code to "pagebeforecreate". The problem with this is that the page will likely render before the ajax call to get the json code and template rendering is done. Basically, "pagebeforecreate" doesn't allow us to "pause" the page transition/rendering until the our ajax call is complete. What I'd love to see is an option to pause the current event through jQM's set of "page*" events by allowing the dev to pass a callback. Maybe a good option for this is to use jQ's new deferred/promise features:
So instead of:
// asynchronous
$('#somepage').bind('pagebeforecreate',function(){... make ajax call for json data ... })
We do something like this:
// synchronous through promises
$.mobile.pageTransitionFilter('beforecreate',{
...
make ajax call for json data. if successful, resolve promise to continue page transition
...
});
This code gets executed much like a "pagebeforecreate" binding but somehow pauses the execution until the promise is resolved.
Thoughts?