Simple javascript template

etree.js

var E = (function () {
	var P = function(name, value) {
		var name = name.split('=');
		this.name = name[0];
		this.propname = name[1];
		this.value = value;
	};

	return function(name, propname, value) {
		return new P(name, propname, value);
	}
}());


var Etree = (function () {
	var getText = function(node) {
		return node.textContent;
	};
	var setText = function(node, value) {
		node.textContent = value;
	};
	var getHTML = function(node) {
		return node.innerHTML;
	};
	var setHTML = function(node, value) {
		node.innerHTML = value;
	};
	var getAttribute = function(node, attribute) {
		return node.getAttribute(attribute);
	};
	var setAttribute = function(node, attribute, value) {
		node.setAttribute(attribute, value);
	};
	var setData = function(self, data) {
		for (var key in data) {
			if (Object.prototype.hasOwnProperty.call(data, key) && Object.prototype.hasOwnProperty.call(self.set, key)) {
				self.set[key](data[key]);
			}
		}
	};

	return function(root, initialData) {
		var getters = {};
		var setters = {};
		var elements = {};

		var buildElement = function(nodeData, parent) {
			if (nodeData.name === '#text') {
				var node = document.createTextNode(nodeData.value);
				parent.appendChild(node);
				if (nodeData.propname !== undefined) {
					getters[nodeData.propname] = function() { return getText(node); };
					setters[nodeData.propname] = function(value) { return setText(node, value); };
				}
			}
			else if (nodeData.name[0] === '@') {
				var attribute = nodeData.name.substr(1)
				parent.setAttribute(attribute, nodeData.value);
				if (nodeData.propname !== undefined) {
					getters[nodeData.propname] = function() { return getAttribute(parent, attribute); };
					setters[nodeData.propname] = function(value) { return setAttribute(parent, attribute, value); };
				}
			}
			else {
				var node = document.createElement(nodeData.name);
				if (nodeData.value) {
					nodeData.value.forEach(function(subElement) {
						buildElement(subElement, node)
					});
				}
				if (nodeData.propname !== undefined) {
					getters[nodeData.propname] = function() { return getHTML(node); };
					setters[nodeData.propname] = function(value) { return setHTML(node, value); };
					elements[nodeData.propname] = node;
				}

				if (parent) {
					parent.appendChild(node);
				}

				return node;
			}
		};

		var component = {
			tree: buildElement(root),
			get: getters,
			set: setters,
			elements: elements
		};
		component.setData = function(data) { setData(component, data); };
		if (initialData !== undefined) {
			component.setData(initialData);
		}
		return component;
	}
}());


// -------------- Usage ------------------

var todoTableTemplate = E('TABLE', [
	E('@border', '1'),
	E('THEAD', [
		E('TR', [
			E('TH', [
				E('#text', 'Úloha (počet: '),
				E('#text=count', ''),
				E('#text', ')')
			]),
			E('TH', [
				E('#text', 'Priorita')
			])
		])
	]),
	E('TBODY=todolist', [
	])
]);
var todoItemTemplate = E('TR', [
	E('@class=priority_class', 'normal'),
	E('TD', [
		E('#text=task', '')
	]),
	E('TD', [
		E('#text=priority', 'Normálna')
	])
]);


var todoTable = Etree(todoTableTemplate);
todoTable.set.count('0');
document.getElementById('container').appendChild(todoTable.tree);

var todoList = [
	Etree(todoItemTemplate, {task: 'Learn javascript'}),
	Etree(todoItemTemplate, {task: 'Write gist'}),
	Etree(todoItemTemplate, {task: 'Do something important', priority: 'Low', priority_class: 'low'})
];

todoList.forEach(function(todoItem) {
	todoTable.elements.todolist.appendChild(todoItem.tree);
});
todoTable.set.count(todoList.length);