In this project I’m porting there’s about a dozen external pages and just as many javascript files. It would look something like this:
\pages\about.html
\js\about.js
So, the about.html is being loaded but I can’t figure out how to load the about.js when the about.html page is loaded (I don’t want to keep a bunch of javascript in the dom when it’s hardly ever used because even minified this app is quite large).
In my various JQMobile apps I have an “engine” with a page init handler which I’ve implemented in F7 like this:
$$(document).on('page:init', function (e, page) {
switch(page.name)
{
case "about":
console.log(page.name);
break;
}
The above works on all the pages I’m experimenting with but I need to load in the pages associated .js file. In the apps I need to port, I used the above switch statement and a basic jquery function to load in the .js files like this:
case "aboutPage":
$.getScript("js/about.js", function( data, textStatus, jqxhr ) {
onAboutInit(); // call the page init function
}).fail(function(xhr, textStatus, error) { jsLoadError(xhr, textStatus, error, "about"); });
break;
Is there an equivalent way of loading the external .js files in F7 and/or will the JQuery method still work?
I tried sticking the script tag at the bottom of the page’s html and that didn’t load the about.js file and calls to aboutPageInit(); failed.
Also, I realize that I can use the router and stick some page init code in it but some of the init code is pretty long and, again, I don’t want to fill up the dom with a bunch of code that never gets used).
Update: This DOES work (but is there a better way?):
$$(document).on('page:init', function (e, page) {
switch(page.name)
{
case "about":
console.log(page.name);
$.getScript("js/about.js", function( data, textStatus, jqxhr ) {
aboutPageInit();
}).fail(function(xhr, textStatus, error) { jsLoadError(xhr, textStatus, error, "about"); });
break;
}
});