moridiweb - templateEngine

Methods

load
```
templateEngine.load( template, data, target, clear ).then(function( output, data ) {});
```
Load a template.

template can be either a HTML string or a location of a file.

data can be either a JSON object or a location of a JSON file.

target is optional and a jQuery element.

clear is a Boolean (default is false), used to clear the target.

Returns a promise with the output and the JSON data object used.
getData
```
templateEngine.getData( url ).then(function( output ) {});
```
Retrieve the data from the URL.

url is the location of a file.

Returns a promise with the output of the file.
loadData
```
templateEngine.loadData( template, data ).then(function( output ) {});
```
Load the data in to the template file.

template is a HTML string.

data is the JSON data object or an array of JSON data objects.

Returns a promise with the output of the file.
execute
```
var output = templateEngine.execute( template, data );
```
Load the data in to the template file.

template is a HTML string.

data is the JSON data object.

Returns a promise with the output of the file.

Examples

Simple load

The JavaScript for a simple load of a HTML into a div:

templateEngine.load('<a class="btn">I\'m a button</a>', {}, $('#templateResults1')).then(function(template) {
	console.log(template);
});

The template variable returned in the promise holds the HTML to be loaded. If you do not supply a target, argument 3, then the template variable will still be returned and not loaded on to the page.

Load template from file

Load Template

The JavaScript to clear the div and then a simple load of a HTML into it:

templateEngine.load('/templates/button.html', {}, $('#templateResults2'), true).then(function(template) {
	console.log(template);
});

The html to be loaded:

<a class="btn">I'm a button</a>

Templates with data

Load Template

The JavaScript to load data into a template:

templateEngine.load('/templates/details.html', {"name": {"first": "Bob", "last": "Jenkins"}, "age": 25}, $('#templateResults3')).then(function(template) {
	console.log(template);
});

The html to be loaded:

<label>First Name:</label>
<span>{name.first}</span>
<label>Last Name:</label>
<span>{name.last}:</span>
<label>Age:</label>
<span>{age}</span>

Loading multiple files

Promises

As templateEngine uses promises the best way to load multiple files is with promises.

The below would load the head contents, then a sidebar, then a header, then the title container and finally the table of contents:

templateEngine.load('/templates/head.html', {}, $('head')).then(function() {
	templateEngine.load('/templates/sidebar.html', {}, $('aside'), true).then(function() {
		templateEngine.load('/templates/header.html', {}, $('header'), true).then(function () {
			var data = {
				'description': 'A lightweight template engine',
				'plugin': '',
				'title': 'templateEngine', 'colour': 'blue', 'github': 'javascript:;', 'bitbucket': 'javascript:;',
				'icon': 'mi-template-engine'
			};
			templateEngine.load('/templates/parallaxTitle.html', data, $('#heading')).then(function () {
				templateEngine.load('/templates/toc.html', {}, $('#toc')).then(function() {
					//do something
				});
			});
		});
	});
});

Complex Promises

Using When

This script would be used if you do not need each promise to be completed in order.

The below would load multiple different slides, using different templates, and put dividers in between after it loads the head contents, then a sidebar and then a header:

var processParallax = function(data) {
	var promises = [];
	$.each(data, function(k, v) {
		var def = new $.Deferred();
		var callback = function () {
			def.resolve();
		};
		if (i != (data.length - 1)) {
			callback = function () {
				templateEngine.load('<div class="section purple"></div>', {}, $('main')).then(function(){
					def.resolve();
				});
			}
		}
		templateEngine.load('/templates/' + v.template + '.html', v, $('main')).then(callback);
		promises.push(def);
		i++;
	});
	return $.when.apply(undefined, promises).promise();
};
templateEngine.load('/templates/head.html', {}, $('head')).then(function() {
	templateEngine.load('/templates/sidebar.html', {}, $('aside'), true).then(function () {
		templateEngine.load('/templates/header.html', {}, $('header'), true).then(function () {
			var data = [
				{
					"title": "advancedSelect",
					"description": "A select replacement which launches a dialog list.",
					"icon": "mi-advanced-select",
					"template": "main"

				},
				{
					"title": "searchSelect",
					"description": "An inline control that launches a search dialog. Results are stored in an input.",
					"icon": "mi-search-select",
					"template": "main"
				},
				{
					"title": "dataTemplates",
					"description": "Inspired by dataTables, this is a template driven, searchable, responsive grid.",
					"icon": "mi-datatemplates",
					"template": "extra"
				}
			];
			processParallax(data).then(function(){
				$('.parallax').parallax();
			});
		});
	});
});

Using Eval

This script would replace the above processParallax function and should be used if you need each promise to be completed in order.

function processParallax(data){
	var mainDef = new $.Deferred();
	var promise = mainDef.promise();
	promise.progress(function() {
		var top = "";
		var bottom = "";
		templateEngine.load('/templates/js/asyncProcessTop.js.html', {}).then(function(topTemplate){
			templateEngine.load('/templates/js/asyncProcessBottom.js.html', {}).then(function(bottomTemplate) {
				templateEngine.load('/templates/js/asyncProcessJQuery.js.html', {}).then(function(indexTemplate) {
					$.each(data, function (i, v) {
						top += templateEngine.execute(topTemplate, {
							'obj': 'data',
							'i': i,
							'maxLength': (data.length - 1)
						});
						top += templateEngine.execute(indexTemplate, {
							'obj': 'data',
							'i': i,
							'maxLength': (data.length - 1)
						});
						bottom += templateEngine.execute(bottomTemplate, {
							'obj': 'data',
							'i': i,
							'maxLength': (data.length - 1)
						});
					});

					var string = top + "mainDef.resolve();" + bottom;
					eval(string);
				});
			});
		});
	});
	mainDef.notify();
	return promise;
}

The JavaScript in asyncProcessTop.js.html is:

var v = {obj}[{i}];
var callback{i} = function () {
	var def = new $.Deferred();
	var promise = def.promise();
	promise.progress(function(v, i, length){
		if (i != length) {
			templateEngine.load('<div class=\"section purple\"></div>', {}, $('main')).then(function(){
				def.resolve();
			});
		}else{
			def.resolve();
		}
	});
	def.notify(v, {i}, {maxLength});
	return promise;
};

The JavaScript in asyncProcessTop.js.html is:

	});
});

The JavaScript in asyncProcessIndex.js.html is:

templateEngine.load('/templates/' + v.type + '.html', v, $('main')).then(function(){callback{i}().then(function(){