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:
<!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 partIf 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
.
get
FUNCTIONBy 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: