Skip to content

Instantly share code, notes, and snippets.

@mireq

mireq/etree.js

Last active August 29, 2015 14:26
Show Gist options
  • Save mireq/89a95cd5606512282079 to your computer and use it in GitHub Desktop.
Save mireq/89a95cd5606512282079 to your computer and use it in GitHub Desktop.
Download ZIP
Simple javascript template
Raw
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment