JavaScript Lightweight template Engine juicer use guide _javascript tips

How to use

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

Juicer (TPL, data);

Only compile template temporarily not render, 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 a 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 by modifying

 Juicer.set (' cache ', false);

Modify default configuration, batch Modify

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

Juicer the compiled template will be cached by default, thus avoiding the time spent repeatedly compiling the same template for multiple data rendering, and without special needs, it is strongly not recommended to turn off the cache in the default parameter, which will invalidate the juicer cache and degrade performance.

Grammar

* ${Variable}

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

${name}
${name|function}

 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); Registers a custom Function
juicer (TPL, JSON);

* Escape/Avoid escaping

-The ${variable} escapes its contents before the output, and if you do not want the output to be escaped, you can use the $${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> '
 

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

-Traversal array, ${index} current Index

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

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

* Note {# comment content}

{# Here is the comment content}
* Auxiliary Loop {@each I in range (M, N)}

 {@each I in range (5)}
     ${i}; Output 5;6;7;8;9;
 {@/each}

* Child template Nesting {@include TPL, data}

-Child template Nesting in addition to the child templates specified in the data, you can use the template code written in the ' Script ' tab 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 the data to the child template, the following code will 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/>< c23/>{@if it.num==3}
           {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);