Not an issue actually but the request to provide more advanced example

[aefimov64]

Dear Andrea,

It would be great if you provide more advanced example that demonstrates the whole power of your plugin. I.e. an example that intercepts ALL jQM page events starting from the beginning.

For me, I'm struggling with proper configuration of the router to intercept pagebeforechange event when first jQM page located in my index.html is processed/displayed by jQM. Everething is fine when I start navigating to other pages. I can intercept the whole bunch if events.

[azicchetti]

Hi @aefimov64
I was planning to make the examples a little bit more useful and hopefully I'll find some time in the next weeks.
In the meanwhile, I'm glad to help you fix your specific issue.

As per the pagebeforechange event, I'll probably remove the support from the router, because (but this is only my opinion) it shouldn't be used in normal applications, at least without very good reasons.
Other events are specifically designed to provide certain "hook points" in the jQM page transition flow and are probably the best choice in normal applications.

[aefimov64]

Thanks a lot for your feedback! I do really want this event (pagebeforechange) to be supported by your excellent plugin. Just one example to illustrate why do I need it. May be you will like this idea too :)

I want page structure in the app to be as much flexibility as possible. Even more I want this structure to be downloadable from my server. I also want my app to be launched with "blank" body because I cannot predict page structure that I will receive on app start from the server!

Armored with your plugin I'm going to setup a set of routers that will help me to intercept pagebeforechange events to populate blank body with requested jQM page on the fly and then navigate to it. This is why I need pagebeforechange event. So the sequence is:

• to intercept pagebeforechange for some specific page and call preventDefault();
• create required jQM page on the fly and append it to the body;
• and finally call chagePage() to navigate to this newly created page.
  etc...

[azicchetti]

I've done some applications that are just like what you've just described but I used a different approach.

Basically what you're trying to do is already done by jquery mobile itself when you use the single page template in "ajax mode".
When a certain page is requested on the client, jquery mobile performs an ajax request to the server, grabs the html and displays the newly created page to the user.
Also, when the user navigates away, the old page is automatically removed by the framework to keep the dom as small as possible.

The html that is fetched from the server can be a simple skeleton and may contain underscore templates, which is very useful to keep the javascript tidy and avoid long strings that contain html code. I find this really useful.
You may populate the page dynamically on the client with regular backbone views.
You can also keep the pages in the dom if you want, just add a route for the pageremove event and call e.preventDefault().

There are, however, some edge cases where you want to append the page yourself, without fetching anything from the server.
You can do this by binding to the pagebeforeload event and doing some things with the event and the associated deferred object (basically, you just have to call e.preventDefault(), then resolve the deferred in the eventdata object).
This is, more or less, the "jquery mobile way", and probably the simplest and fastest way to dynamically inject pages with this framework.

The only limit of this technique is that you have to follow these simple rules:

• use "real" page names, that is to say, you can't use "#page" for your links, but you have to use "page" or (better) "page.html" (this is not entirely true, but you better stick to either hash prefixed pages or standard links)
• disable the pushState feature $.mobile.pushStateEnabled=false;
• forget pseudo-nice urls, because ajax mode with pushState disabled generates urls in this form: http://host/directory/index.html#/directory/otherpage.html?arguments

Hope this is somehow useful.
Cheers,
Andrea