Guide to use juicer for lightweight template engine

How to use

Compile the template and render the results immediately based on the data

 juicer(tpl, data);

Only compile the template and do not render it yet, return a reusable compiled function.

 var compiled_tpl = juicer(tpl);

Render the previously compiled template based on the given data

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

Register/Login custom functions (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, modify it one by one

 juicer.set('cache', false);

Modify the default configuration, batch modification

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

Juicer will cache compiled templates by default, thereby avoiding the time spent repeatedly compiling the same template when data is rendered multiple times. If there are no special needs, it is strongly not recommended to turn off cache in the default parameters. Doing so will cause the Juicer cache to be invalidated and reduce performance.

grammar

* ${variable}

- Use ${} output variable, where _ is a reference to the data source (${_}). Supports the use of custom functions.

 ${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 + '" />';};juicer.register('links_build', links); //Register custom function juicer(tpl, json);

* Escape/avoid escape

- ${variable} will escape its contents before output, and if you don't want the output to be escaped, you can use $${variable} to avoid this.

 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 through {@each} ... {@/each}

- Iterate over the array, ${index} current index

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

*Judge{@if} ... {@else 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}

*Sub-template nesting{@include tpl, data}

- Sub-template nesting In addition to introducing sub-templates specified in the data, sub-template code written in the `script` tag can also be used 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'}});//Open Hi, I'm sub content, juicer, End. //Or introduce sub-templates 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);