Javascript lightweight templating engine juicer user guide

Method of use

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

juicer(tpl, data);

Compile only the template and do not render, return a reusable compiled function

 var compiled_tpl = juicer(tpl);

Render previously compiled templates based on the given data

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

Register/unregister custom functions (objects)

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];
 }

Change the default configuration, item by item

 juicer.set('cache', false);

Modify the default configuration, batch modification

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

By default, Juicer will cache the compiled template to avoid the time it takes to compile the same template multiple times during data rendering. It is strongly discouraged to turn off the cache in the default parameter if there is no special need. This will invalidate the Juicer cache and degrade performance.

grammar

* ${variable}                 

* escape/avoid escape

        - ${variable} escapes its contents before output. If you don't want the output to be escaped, 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 traversal (link: #)}... {@ / each}                    

        - traverses groups, ${index} current index

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

* judge (link: #)}... (link: #) if}... (link: #)}... {@ / if}

* comment {# comment content}

  {# here is the comment content}
* auxiliary loop (link: #) I in range(m, n)}

 {@each i in range(5, 10)}
     ${i}; //The output 5; 6; 7. 8; 9.
 {@/each}

* subtemplate nesting (link: #) TPL, data}

            - nested subtemplates in addition to introducing subtemplates specified 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 by introducing a subtemplate through the data, the following code will also have the same render 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);