jqtpl v2.0.16-rc1
A template engine for nodejs, browser and any other javascript environment.
- Logic-less.
- Extendable - implement your own tags.
- Html escaped per default.
Originally started as a port of jquery templates.
http://github.com/jquery/jquery-tmpl
http://api.jquery.com/category/plugins/templates/
Now compatibility to the original engine is dropped as jquery-tmpl is not any more developed.
Installation
$ npm i jqtpl
$ make test
Template API
${}, {{=}} print variable, array or function (escaped)
Print variable
// tpl
<div>${a}</div>
// code jqtpl.render(tpl, {a:123}); // output
<div>123</div>
Print array
//tpl <div>${a}</div> // code jqtpl.render(tpl, [{a:1},{a:2},{a:3}]); // output <div>1</div><div>2</div><div>3</div>
Print automatically detected function
// tpl <div>${a}</div> // code jqtpl.render(tpl, { a: function() { return 1 + 5; } }); //output <div>6</div>
{{if}} and {{else}}
// 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.render(tpl, {a:6});
// output
<div>6</div>
// code
jqtpl.render(tpl, {a:5});
// output
<div>a is not 6</div>
{{each}} looping.
// tpl
{{each(name, i) names}}
<div>${i}.${name}</div>
{{/each}}
// alternative syntax
{{each names}}
<div>${$index}.${$value}</div>
{{/each}}
// code
jqtpl.render(tpl, {names: ['A', 'B']});
// output
<div>0.A</div><div>1.B</div>
{{html}} - print unescaped html.
// tpl
<div>{{html a}}</div>
// code
jqtpl.render(tpl, {a:'<div id="123">2</div>'});
// output
<div id="123">2</div>
{{!}} - comments.
// tpl
<div>{{! its a comment}}</div>
// code
jqtpl.render(tpl);
// output
<div></div>
{{partial}} - subtemplates.
Render subtemplates by passing a template string, template name or file name (serverside).
Note: passing json object with 2 curly brackets without any separation will break the engine: {{partial({a: {b: 1}}) 'mypartial'}}
// tpl
<div>{{partial({name: 'Test'}) '${name}'}}</div>
<div>{{partial 'myTemplate'}}</div>
<div>{{partial 'myTemplate.html'}}</div>
// code
jqtpl.render(tpl);
// output
<div>Test</div>
{{verbatim}} tag
Skip a part of your template - leave it in original on the same place but without "verbatim" tag. If you render the result as a template again - it will be rendered.
The use case is to be able to render the same template partially on the server and on the client. F.e. a layout template can contain variables which needs to be rendered on the server and templates which need to be rendered on the client.
// mytemplate.html
<div>my name is ${name}</div>
{{verbatim}}
<script id="my-template">
<div>your name is ${userName}</div>
</script>
{{/verbatim}}
// code
res.render('myaction', {name: 'Kof'});
// output
<div>my name is Kof</div>
<script id="my-template">
<div>your name is ${userName}</div>
</script>
Engine API
require the module
var jqtpl = require('jqtpl');
jqtpl.render(markup, data);
Compile and render a template. It uses jqtpl.template
method. Returns a rendered html string.
markup
html code or precompiled template name.data
optional object or array of data.
jqtpl.compile(markup, name)
Compile and cache a template string. Returns a render
function which can be called to render the template, see jtpl.render
.
markup
html string.name
optional template name, if no name is passed - markup string will be used as a name.// tpl <div>${a}</div> // code // precompile an cache it jqtpl.compile(tpl, 'myTemplate'); // render user a name jqtpl.render('myTemplate', {a:1}); // delete the template from cache delete jqtpl.cache['myTemplate']; // output <div>1</div>
jqtpl.cache
A map of compiled templates.
key
- template name or markup string.value
- compiled template function.
jqtpl.$
A namespace for global helper functions, which can be used in every template.
Express specific stuff
Note: express will cache all templates in production!
Usage
app.set('views', '/path/to/the/views/dir');
app.set('view engine', 'html');
app.engine('html', require('jqtpl').__express);
{{layout}} tag
Using layout tag in a view it is possible to define a layout within this view.
// mylayout.html
<html>
{{html body}}
</html>
// myview.html
{{layout 'mylayout'}}
<div>myview</div>
// myview1.html
{{layout({a: 1}) 'mylayout'}}
<div>myview1</div>
// output
<html>
<div>myview</div>
</html>
Licence
See package.json
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
12 years ago
12 years ago
12 years ago
12 years ago
13 years ago
13 years ago
13 years ago
13 years ago
13 years ago
13 years ago
13 years ago
13 years ago
13 years ago
13 years ago
13 years ago
13 years ago
13 years ago
13 years ago
13 years ago
13 years ago
13 years ago
13 years ago
13 years ago