Template loader wrapper

/**
 * The templates tool loads a template with view data. It caches template scripts.
 *
 * Example: loader.load('/path/to/template.html', 'selector', container, data);
 */
(function ($, M) {
	'use strict';
	var templates = {},
		data = {};

	/**
	 * Render a template
	 * @param {Object} template {id: id, html: template}
	 */
	function renderTemplate(template) {
		var viewData = data[template.id].viewData,
			$container = data[template.id].$templateContainer,
			output = M.render(template.html, viewData);
		// clear and fill the container
		$container.html('').html(output);

	}

	/**
	 * get template by url
	 * @param {String} templateUrl Location of the template
	 * @param {String} templateId  ID of template
	 */
	function getTemplate(templateUrl, templateId) {
		var templateDefer = new $.Deferred();

		// get template
		$.get(templateUrl, function (file) {
			var html = $(file).filter('#' + templateId).html();
			templates[templateId] = templateDefer.promise();
			templateDefer.resolve({id: templateId, html: html});
		});
		return templateDefer.promise();
	}

	/**
	 * Load a template and put it in a container.
	 * @param {String} templateUrl        The absolute path to the template
	 * @param {String} templateId         The id of the chosen template
	 * @param {jQuery} $templateContainer Empty container where the template will be placed in
	 * @param {Object} viewData           The data that is loaded in the template
	 */
	function load(templateUrl, templateId, $templateContainer, viewData) {
		var templateRendered = $.Deferred();
		data[templateId] = {
			$templateContainer: $templateContainer,
			viewData: viewData
		};
		function resolveLoad() {
			templateRendered.resolve($templateContainer);
		}
		if (templates[templateId]) {
			// template already in cache
			templates[templateId].done(renderTemplate, resolveLoad);
		} else {
			getTemplate(templateUrl, templateId).done(renderTemplate, resolveLoad);
		}
		return templateRendered.promise();
	}

	loader = {
		load: load
	};
}(jQuery, Mustache));
Posted on by Kasper

loadPage

/**
 * Load a template and put it in a container.
 * @param {String} templateUrl        The absolute path to the template
 * @param {String} templateId         The id of the chosen template
 * @param {jQuery} $templateContainer Empty container where the template will be placed in
 * @param {Object} viewData           The data that is loaded in the template
 *
 * @TODO: this must be refactored to a wrapper function for Mustache
 */
function loadPage(templateUrl, templateId, $templateContainer, viewData) {
	var defer = new $.Deferred();
	$.get(templateUrl, function(templates) {
		var template = $(templates).filter(templateId).html();
		var output = M.render(template, viewData);
		$templateContainer.html(output);
		defer.resolve();
	});
	return defer.promise();
}
Posted on by Kasper

get url parameters

function get(key) {
	var searchParams = {},
		search = window.location.search.substring(1); // substring to remove the ?

	if (search) {
		search = search.split('&');
		for (var i in search) {
			if (search.hasOwnProperty(i) && i !== '') {
				var pair = search[i].split('=');
				pair[0] = decodeURIComponent(pair[0]);
				pair[1] = decodeURIComponent(pair[1]);
				searchParams[pair[0]] = pair[1];
			}
		}
	}

	if (key) {
		return searchParams[key];
	}

	return searchParams;
}
Posted on by Kasper