JavaScript lightweight template engine juicer usage guide_javascript skills

How to use

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

juicer(tpl, data);

Only compile the template without rendering it, and return a reusable compiled function

 var compiled_tpl = juicer(tpl);

Render the previously compiled template based on the given data

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

Register/Unregister custom 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 and modify it item by item

 juicer.set('cache', false);

Modify default configuration and batch modification

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

Juicer will cache the compiled template by default, thereby avoiding the time spent on repeated compilation when the same template is rendered multiple times. If there is no special need, it is strongly not recommended to turn off the cache in the default parameters. Doing so will cause Juicer cache invalidation reduces performance.

Grammar

* ${Variable} 

- Use ${} to output variables, 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 + '" alt="' + data.alt + '" />';
};
juicer.register('links_build', links); //注册自定义函数
juicer(tpl, json);

* Escape/Avoid escaping

- ${Variable} will escape its content before outputting it. If you don’t 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); //输出 '<strong>juicer</strong>'
 juicer(unescape_tpl, json); //输出 '<strong>juicer</strong>' 

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

- Traverse the array, ${index}current index

 {@each list as item, index}
     ${item.prop}
     ${index} //当前索引
 {@/each}

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

*Comments {# Comment content}

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

 {@each i in range(5, 10)}
     ${i}; //输出 5;6;7;8;9;
 {@/each}

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

- In addition to introducing subtemplates specified in the data, subtemplate nesting 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'
}
});

//输出 Hi, I'm sub content, juicer, End.
 //或者通过数据引入子模板，下述代码也将会有相同的渲染结果：
 
 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);