Javascript lightweight template engine juicer User Guide

Usage

Compile the template and render the result immediately Based on the Data

juicer(tpl, data);

Only the compiled template is not rendered at the moment. A reusable compiled function is returned.

 var compiled_tpl = juicer(tpl);

Renders the previously compiled template based on the given data.

 var complied_tpl = juicer(tpl); var html = complied_tpl.render(data);

Register/deregister a user-defined function (object)

juicer.register(‘function_name', function);juicer.unregister(‘function_name');

Default parameter configuration

 {   cache: true [false];   script: true [false];   error handling: true [false];   detection: true [false]; }

Modify the default configuration one by one

 juicer.set('cache', false);

Modify default configurations and modify them in batches

 juicer.set({      'script': false,      'cache': false })

By default, Juicer caches compiled templates to avoid the time required for repeated compilation during multiple data rendering of the same template. It is strongly not recommended to disable the cache in the default parameters unless otherwise specified, this will invalidate the Juicer cache and thus reduce performance.

Syntax

* $ {Variable}

-Use $ {} to output the variable, where _ is a reference to the data source ($ {_}). User-defined functions are supported.

${name}${name|function}${name|function, arg1, arg2} 

Var = links: [{href: 'http: // juicer. name', alt: 'juicer'}, {href: 'http: // benben. cc ', alt: 'benben'}, {href: 'http: // ued.taobao.com', alt: 'taobao ued'}]}; var tpl = ['{@ each links as item}', '$ {item | links_build} <br/>', '{@/each}']. join (''); var links = function (data) {return '<a href ="' + data. href + '"alt ="' + data. alt + '"/>';}; juicer. register ('links _ built', links); // register the custom function juicer (tpl, json );

* Escape/avoid escape

-$ {Variable} is escaped before output. If you do not want the output result to be escaped, you can use $ {Variable} to avoid this situation.

Var json = {value: '<strong> juicer </strong>'}; var escape_tpl = '$ {value}'; var unescape_tpl = '$ {value }'; juicer (escape_tpl, json); // output '<strong> juicer </strong> 'juicer (unescape_tpl, json); // output' <strong> juicer </strong>'

* Loop traversal {@ each}... {@/each}

-Traverse the array and $ {index} The current index

{@ Each list as item, index }$ {item. prop }$ {index} // current index {@/ each}

* Judge {@ if}... {@ else}... {@/if}

* Comment {# comment content}

{# Here is the comment content}
* Auxiliary loop {@ each I in range (m, n )}

{@ Each I in range (5, 10) }$ {I}; // output 5; 6; 7; 8; 9 ;{@/each}

* Subtemplate nesting {@ include tpl, data}

-In addition to introducing the specified sub-template in the data, you can also use the template code written in the 'script' tag by specifying the string '# id.

-HTML code:

<script type="text/juicer" id="subTpl">   I'm sub content, ${name}</script>

-Javascript code:

Var tpl = 'Hi, {@ include "# subTpl", subData}, End. '; juicer (tpl, {subData: {name: 'juicer'}); // output Hi, I'm sub content, juicer, End. // or introduce the sub-template through data, the following code will also have the same rendering result: var tpl = 'Hi, {@ include subTpl, subData}, End. '; juicer (tpl, {subTpl: "I'm sub content, $ {name}", subData: {name: 'juicer '}});

A complete example

HTML code:

 <script id="tpl" type="text/template">   <ul>     {@each list as it,index}       <li>${it.name} (index: ${index})</li>     {@/each}     {@each blah as it}       <li>         num: ${it.num} <br />         {@if it.num==3}           {@each it.inner as it2}             ${it2.time} <br />           {@/each}         {@/if}       </li>     {@/each}   </ul> </script>

Javascript code:

 var data = {   list: [     {name:' guokai', show: true},     {name:' benben', show: false},     {name:' dierbaby', show: true}   ],   blah: [     {num: 1},     {num: 2},     {num: 3, inner:[       {'time': '15:00'},       {'time': '16:00'},       {'time': '17:00'},       {'time': '18:00'}     ]},     {num: 4}   ] };  var tpl = document.getElementById('tpl').innerHTML; var html = juicer(tpl, data);