Since jQuery Mobile’s method changePage will load only the element with the data-role=”page” attribute set, I am not able to use external .js files in my project.
A couple workarounds I’ve come across:
- Load all the .js at once in the first page. It works perfectly, I can use events when each page loads and have it structured on different .js files. It doesn’t look right to me though.
- Use tags within the data-role=”page” div. It works too, but I don’t know how “elegant” is to insert in random places in the HTML.
- Use jQuery to load it asynchronously. I would make a request as the new page loads. Drawback: not so elegant either and generates two requests.
I couldn’t find any information on this matter in the documentation. What solution is considered the best one?
The generally accepted approach seems to be to use a build script (such as a Node.js jakefile https://github.com/mde/jake) to build a ‘production’ copy of your web app where the scripts it requires are all aggregated into one and minified.
Dynamic loading of JS files is possible with hacks but I don’t believe its generally worthwhile.