Creating a Namespace
[gist id=1246402 file=ready.core.js]
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.
[gist id=1246402 file=ready.navigation.js]
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.
[gist id=1246402 file=ready.homepage.js]
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 ready for your enjoyment.
Now Playing: Nas – It Ain’t Hard to Tell (Reading Rainbow Remix)
Honorable Mention: Nas – It Ain’t Hard to Tell (Danger Mouse Remix)0 comments , permalink