What is the best practice organize a jQuery Mobile application?

Question

I have found article that skims over this. But my main question is do I need a separate .html file for each screen? I am thinking yes but I would like an unanimous vote. Also, does that go for separate JS files too?

Edit: JQM app is basically to admin users and roles.

Answer 1

We have a production jQM site here's how we do things - and yes others may disagree but we found this works for a very large site.

1. Use multiple single HTML pages, a large multi-page template defeats the benefits of jQM's ajax loading since you're loading all your HTML at the start (unless your site is small)

2. You definitely want to use ajax loading, jQM only pulls in the code in your <div data-role="page"> BUT this complicates your JS see below

3. You don't need multiple JS files, BUT you do need to load all your JS at the start, we accomplish this by doing two things: 1. we put an on listener at the document root, and listen for pageinit/pageshow events. Everytime a page is loaded these are triggered, you also have a handy reference to the current page, and you can use an attr on the page to determine what page it was. 2. Have all the JS in an include of some sort (hopefully you are using PHP, CF or something) and put this on every page, that way no matter which entry point a user browses to your mobile site with, they get all the code loaded

The downside is that all the JS is loaded initially, but minified we find it's no big deal, and if it's really a concern look into RequireJS - plus it makes debugging a breeze since the JS is all there we can easily use the debugger and place breakpoints. If you load JS dynamically on each page you increase the data you need to return on each page transistion and you have ugliness because you reload redundant JS and it's hard to debug dynamic JS.

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(oEvent){

    var pageType = $(this).data('pagetype');

    //handle pageinit/pageshow (oEvent.type) for each pageType

Answer 2

I think its best to have a different html file for each screen. Not only will it help in maintaining the app code properly and tracking changes, but also prevent dom from becoming bulky as pages will be added when required.
As for js, you can have separate js files during development and debugging, but i'd suggest u should bundle them and minify them before deploying the app and releasing it.