JS templating system

templating.js

'use strict';

/*
 * Javascript templating system
 */
$(document).ready(function() {
	function loadTemplate(element, path, callback, done) {
		$.ajax(path).then(function(html) {
			element.append(html);
			if (typeof callback === 'function' ) {
				callback();
			}
			if (typeof done === 'function' ) {
				done(element);
			}
		});
	}

	function loadComponent() {
		var el = $(this);
		var callback = $(el).data('component');
		var templateName = $(el).data('template');
		var template = 'components/' + templateName + '.html';
		loadTemplate($(el), template, window[callback], function(element) {
			// Initialize functions using data-component attributes inside markup
			$(element).find('[data-component]').each(loadComponent);
		});
	}

	// Load components
	$('[data-component]').each(loadComponent);
});