[ How to: ] Page class routing - Glidias/Kilogaiajax GitHub Wiki

If you're using something like a single compiled monolithic JS file to store all your application/page-related functionality, and do not wish to preload individual page-specific JS files, you can still use Kilogaiajax and initialize your pages accordingly. Here's a possible way to go about it.

1. Load your application code with the single compiled JS file

Example app structure, a single initialized application instance yet to be started:

var myApp = new (function() {
	this.main = function() {  // main starting execution code begins here
		
		
	}
	
	// declare page initialization methods here
	this.BaseDefaultPage = function() {
		
	}
	this.HomePage = function() {
		
	}
	this.AboutPage = function() {
		
	}
	
})();

2. Prepare Site XML with your own custom attributes or data

In this case, I put my own attribute className inside the page node.

<?xml version="1.0" encoding="utf-8" ?>
<site title="Kilogaiajax Example App: %PAGE%">
	<page>
		<page id="home" src="home.html" title="Home" className="HomePage"></page>
		<page id="about" src="about.html" title="About Us" className="AboutPage"></page>
	</page>
</site>

3. Initialize the correct page class method using the custom attribute

Using "onSiteXMLReady" as an event hook to initialize your application is optional ( i commented it off). In some cases, you'd want the Site Model to be available before executing your application's main() method.

I've listed several METHODS you can choose from. It's up to you to decide how you want to remotely initialize your pages before transiting them in.

METHOD 1 - direct execution of page class method initialization code before transitioning it in

//Gaiajax.api.onSiteXMLReady( function() {
	
	myApp.main();

	Gaiajax.api.onBeforeTransitionIn.add( function() { 
		var appClassName = Gaiajax.api.getCurrentPage().json["@attributes"].className;
		if (myApp[appClassName]) {
			myApp[appClassName]();
		}
		else {
			myApp.BaseDefaultPage();
		}
	});	
	
//});

METHOD 2 - direct setting of "gaiaReady" to page class method

//Gaiajax.api.onSiteXMLReady( function() {
	
	myApp.main();
	
	Gaiajax.api.onBeforeReady.add( function() {
		var appClassName = Gaiajax.api.getTargetPage().json["@attributes"].className;
		gaiaReady = myApp[appClassName] || myApp.BaseDefaultPage;  // setup temporary 'gaiaReady' in global scope
	});
	
//});

NOTE: The above initialization scripts should be loaded in the head tag and not loaded via Site XML itself. This is especially true if you're using the Gaia.api.onSiteXMLReady hook.

⚠️ **GitHub.com Fallback** ⚠️