<script type="text/template" id="my-content">
<div class="content">
<h1><% title %></h1>
<% while(c = colors.shift()) { %>
<p><% c %></p>
<% } %>
</div>
</script>
window.onload = function() {
var Component = {
title: 'Awesome template',
colors: ['read', 'green', 'blue'],
render: '#my-content'
}
var Engine = function(comp) {
var parse = function(tplHTML) {
var re = /<%([^%>]+)?%>/g;
var code = [], cursor = 0;
while(match = re.exec(tplHTML)) {
code.push(tplHTML.slice(cursor, match.index));
code.push({code: match[1]}); // <-- expression
cursor = match.index + match[0].length;
}
code.push(tplHTML.substr(cursor, tplHTML.length - cursor));
var body = 'var r=[];\n';
while(line = code.shift()) {
if(typeof line === 'string') {
// escaping quotes
line = line.replace(/"/g, '\\"');
// removing new lines
line = line.replace(/[\r\t\n]/g, '');
// removing tabs
line = line.replace(/ /g, '');
body += 'r.push("' + line+ '");\n'
} else {
if(line.code.match(/(^( )?(if|for|else|switch|case|break|while|{|}))(.*)?/g)) {
body += line.code + '\n';
} else {
body += 'r.push(' + line.code + ');\n';
}
}
}
body += 'return r.join("");';
body = 'with(component) {' + body + '}';
return new Function('component', body).apply(comp, [comp]);
}
var tpl = document.querySelector(comp.render);
if(tpl) {
var html = parse(tpl.innerHTML);
return stringToDom(html);
}
}
var el = Engine(Component);
document.querySelector('body').appendChild(el);
function stringToDom(str) {
var wrapMap = {
option: [ 1, "<select multiple='multiple'>", "</select>" ],
legend: [ 1, "<fieldset>", "</fieldset>" ],
area: [ 1, "<map>", "</map>" ],
param: [ 1, "<object>", "</object>" ],
thead: [ 1, "<table>", "</table>" ],
tr: [ 2, "<table><tbody>", "</tbody></table>" ],
col: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ],
td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],
_default: [ 1, "<div>", "</div>" ]
};
wrapMap.optgroup = wrapMap.option;
wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
wrapMap.th = wrapMap.td;
var element = document.createElement('div');
var match = /<\s*\w.*?>/g.exec(str);
if(match != null) {
var tag = match[0].replace(/</g, '').replace(/>/g, '');
var map = wrapMap[tag] || wrapMap._default, element;
str = map[1] + str + map[2];
element.innerHTML = str;
// Descend through wrappers to the right content
var j = map[0]+1;
while(j--) {
element = element.lastChild;
}
} else {
// if only text is passed
element.innerHTML = str;
element = element.lastChild;
}
return element;
}
}
Also see: Tab Triggers