Ben Forta pinged me with an interesting question (and when the Forta pings you, you respond) that I thought I’d share here. It’s one of those “best practices” questions that really has no best answer, so as always, I’m very eager to hear what my readers have to say. Don’t feel afraid to tell me I’m completely off my rocker – that makes for fun conversation. Ok, so the question:
I have a JQ+jQM=PG app. It started off as 2 small pages and 50 lines of code, and is now 10 pages and over 1000 lines of code (excluding lots of .js libraries, some my own and some downloaded, that are all included).
I know there is no right or wrong answer, but I am about to start refactoring this entire mess, so … any thoughts you’d like to share?
That’s quite a bit there and covers a few different aspects. I’d separate this into:
- jQuery Mobile HTML architecture (in other words, how to organize your views)
- Handling UI changes in a jQuery Mobile page for non-visible pages.
Let’s discuss pages first. In jQuery Mobile, a “page” is a div element with a data-role of page. It does not need to be one particule HTML file. jQuery Mobile allows you to use as many “pages” as you want within a particular HTML file. However – I think it quickly gets messy if you begin putting lots of different pages into one HTML file. At most, I may have a root index.html page that includes the initial view and possibly a simple “About” page or “Office Location” type list. Outside of that I follow the same rules I would for a non-jQuery mobile site. One page per file – using a file naming and folder system that makes sense.
Now for your final aspect – how to modify the UI of other pages. This one is going to be tricky. When you load a page via jQuery Mobile, it adds the page into your DOM. Once it is “gone”, it’s really just hidden. You can still work with it. But if you haven’t loaded it yet, you can’t. That is enough for me to think that this approach may be a bad idea.
So… thoughts? I know this is all theory and no code, so if folks want to work on a proof of concept example (via Github), let me know and I’ll set up a repo. Also, if folks have examples they can share, please do.