Automatic setup

Set it and forget it

The template includes a innovative plugin to automatically detect when content is inserted or removed (using jQuery's methods), and apply all template effects - for instance, style select and switches, enable custom scroll... What does it mean? Smaller and cleaner code, and no need to setup extra callback functions for each and every AJAX loaded content.

Give it a try below: click the button to load some AJAX content in the box below - there is no callback set, but the required plugins are fired automatically:

The automatic setup it called at startup and everytime the DOM is modified with jQuery, which means that even external plugins will benefit from it. It also provides a cleaning method to clear markup before removing it, for instance all open tooltips will be removed - those who have used such plugins know what I am talking about...

Extensibility

Need some extra work done by the automatic setup? No problem, there's an app... ew, a function for this: for instance, let's say you have a WYSIWYG plugin that should be applied to every textarea with a specific class in your app:

/**
 * Add a new global setup function. The function should accept 2 arguments:
 * - self (whether the current element should be affected or not)
 * - children (whether the element's children should be affected or not)
 */
$.template.addSetupFunction(function(self, children)
{
	// Here comes your custom code
	this.findIn(self, children, 'textarea.wysiwyg').initEditor();
});

Once this function is set, it will run everywhere in your app, even on your AJAX content. Pretty neat, huh? Now you can move on and forget it.

Of course, it can be disabled and enabled at runtime when performing heavy DOM operations.