jqtpl

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><div id="123">2</div></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.set('layout', true);
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