Creating a Namespace
So, what we're doing here is creating a blank object (MYAPP) to "scope" our application objects. We extend that object with some new objects to hold our pages and maybe even some options. We would also maybe put some other stuff in here, but for this example we'll keep it mostly clean.
The Page Event Mapper
Now it's time to do some plumbing work to hook the new page objects we are going to create up to the jQuery Mobile navigation framework. We want to pass the page events from jQuery Mobile to a page class that will handle the events.
Every page in jQuery mobile is wrapped in a div with a data-role attribute set to "page", so what we're doing here is handling the jQuery Mobile page events and passing them to our corresponding page.
A Page Class Example
Speaking of pages, let's take a look at what an example page looks like in my code.
As you can see, I've kept the code pretty simple. This class will now be able to respond to init events (which get fired before the page is modified by jQuery Mobile) and the show event which gets fired every time the page is navigated to (even when it's cached and navigated back to).
But Don't Take My Word For It
If you want to give a try for yourself, head on over to the jsFiddle I set up with this example code already set up.
Now Playing: Nas - It Ain't Hard to Tell (Reading Rainbow Remix)