http://github.com/jquery/jquery-tmpl
http://api.jquery.com/category/plugins/templates/
Note: currently not implemented: wrap tag and tmplItem method.
http://docs.djangoproject.com/en/dev/topics/templates/
- no program logic in templates
- no embeded script language like in ejs
- this is evil because it enables program logic in templates
- bad usability
- because of the "var" problem in javascript
- jquery tmpl plugin conform
- extendable - you can implement new statements
- html escaping per default
- simple syntax
- tiny and fast
npm install jqtpl
$ make test
var jqtpl = require("jqtpl");
Compile and render a template.
markup
html code stringdata
object or array of dataoptions
optional options object
Named templates - there is a way to precompile the template using a string, so you can render this template later using its name.
// tpl
<div>${a}</div>
// code
// precompile an cache it
jqtpl.template( "templateName", tpl );
// render
jqtpl.tmpl( "templateName", {a:1} );
// you can also delete the template from cache
delete jqtpl.template["templateName"];
// output
<div>1</div>
$data
- data object passed to render method$item
- contains $data via $item.data as well as user options - an optional map of user-defined key-value pairs.
Examples:
// tpl
<div>${ $item.someMethod() }</div>
// code
jqtpl.tmpl( tpl, {a:1}, {
someMethod: function(){ return 1; }
});
//output
<div>1</div>
// tpl
<div>${a}</div>
// code
jqtpl.tmpl( tpl, {a:123});
// output
<div>123</div>
//tpl
<div>${a}</div>
// code
jqtpl.tmpl( tpl, [{a:1},{a:2},{a:3}]);
// output
<div>1</div><div>2</div><div>3</div>
// tpl
<div>${a}</div>
// code
jqtpl.tmpl( tpl, {
a:function() {
return 1 + 5;
}
});
//output
<div>6</div>
// tpl
{{if a == 6}}
<div>${a}</div>
{{else a == 5}}
<div>5</div>
{{else}}
<div>a is not 6 and not 5</div>
{{/if}}
// code
jqtpl.tmpl( tpl, {a:6});
// output
<div>6</div>
// code
jqtpl.tmpl( tpl, {a:5});
// output
<div>a is not 6</div>
// tpl
{{each(i, name) names}}
<div>${i}.${name}</div>
{{/each}}
// alternative syntax
{{each names}}
<div>${$index}.${$value}</div>
{{/each}}
// code
jqtpl.tmpl( tpl, {names: ["A", "B"]});
// output
<div>0.A</div><div>1.B</div>
// tpl
<div>{{html a}}</div>
// code
jqtpl.tmpl( tpl, {a:'<div id="123">2</div>'});
// output
<div id="123">2</div>
// tpl
<div>{{! its a comment}}</div>
// code
jqtpl.tmpl( tpl );
// output
<div></div>
Note: passing json object with 2 curly brackets without any separation will break the engine: {{tmpl({a: {b: 1}}) "mypartial"}}
// tpl
<div>{{tmpl({name: "Test"}) '${name}'}}</div>
// code
jqtpl.tmpl(tpl);
// output
<div>Test</div>
app.set("view engine", "html");
app.register(".html", require("jqtpl").express);
Read express documentation here http://expressjs.com/guide.html#res.partial()
// tpl
// myaction.html
<div>{{partial({test) "mypartial"}}</div>
// mypartial.html
${name}
// code
app.get('/myaction', function(req, res) {
res.render('myaction', {test: {name: 'Test'}});
})
// output
<div>Test</div>
Using array of data:
// tpl
// myaction.html
<div id="main">
{{partial(test) "mypartial"}}
</div>
// mypartial.html
<div class="partial">
${name}
</div>
// code
app.get('/myaction', function(req, res) {
res.render('myaction', {
as: global,
test: [
{name: "Test1"},
{name: "Test2"}
]
});
})
// output
<div id="main">
<div class="partial">Test1</div>
<div class="partial">Test2</div>
</div>
Using layout tag in a view it is possible to define a layout within this view. Note: it is possible since [email protected].
// tpl
// mylayout.html
<html>
{{html body}}
</html>
// myview.html
{{layout "mylayout"}}
<div>myview</div>
// output
<html>
<div>myview</div>
</html>
// tpl
{{literal}}
${will_not_be_evaluated}
{{/literal}}
// output
${will_not_be_evaluated}
// tpl
{{literal foo}}
{{/literal}}
{{/literal bar}}
{{/literal foo}}
// output
{{/literal}}
{{/literal bar}}