https://github.com/cho45/micro-template.js
micro-template is a template engine on JavaScript which like embed js.
This is inspired from John Resig's template but has more efficient feature:
- Better error messages: show line-number in runtime errors
- Support source map: debug is more easily on Chrome including syntax errors
- Well tested: tested on node.js
- Escape by default: all output is escaped by default for security
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<script type="text/javascript" src="micro-template.js"></script>
<script type="text/javascript" src="foo.js"></script>
</head>
<body>
<script type="application/x-template" id="tmpl1">
<div class='foobar' id="aaa">
<% if (isFoo) { %>
<%= foobar %>
<% } else { %>
<%= foobaz %>
<% } %>
<%=raw html %>
</div>
</script>
</body>
</html>
// foo.js
window.onload = function () {
var html = template('tmpl1', {
isFoo : true,
foobar : 'foobar!!',
foobaz : 'foobaz!!',
html : '<marquee>Helloooo</marquee>'
});
console.log(html);
};
var template = require('micro-template').template;
template.get = function (id) { return require('fs').readFileSync('tmpl/' + id + '.tmpl', 'utf-8') };
var result = template('part1', {
foo : 'bar',
baz : 'piyo'
});
<% … %>: normal script part<%= … %>: escaped html output part<%=raw …%>: unescaped (almost dangerous) html output part
If the first argument of template matches /^[\w\-]+$/, it is treated as id of template. In this case, use document.getElementById(id).innerHTML to get source.
Otherwise, the first argument is treated as source directly.
The second argument is optional. If it was NOT supplied, template() returns Function, otherwise String.
By default, micro-template uses document.getElementById(id).innerHTML to get template source from id.
To override this behaviour, you can set function to template.get.
template.get = function (id) { return require('fs').readFileSync('tmpl/' + id + '.tmpl', 'utf-8') };
By default, micro-template uses with syntax to expand data variables. This behavior is almost convenience, but if you want to expressly fast template function, you can do without with by sepcify template.varible.
template.variable = 'tmpl';
var func = template('aaa <% tmpl.foo %> bbb');
var result = func({ foo : 'foo' });
template.variable is used to data variable name in template code. And with syntax is not used any more. So you can't refer to variable without tmpl. prefix in this case.
This package also provides extended function which includes include and wrapper function. Of course, this feature can be used on browsers by just copying and pasting lib/micro-template.js.
var template = require('micro-template').extended;
template('view1', { foo : 'bar' });
<!-- view1 -->
aaa
<% include('view2') %>
bbb
<!-- view2 -->
Hello, World!
var template = require('micro-template').extended;
template('view1', { foo : 'bar' });
<!-- view1 -->
<% wrapper('wrapper', function () { %>
<h1>Hello, World!</h1>
<% }) %>
<!-- wrapper -->
<!DOCTYPE html>
<title><%= foo %></title>
<body><%=raw content %></body>
on Browsers:
node:
- node misc/benchmark.js