Chinese front-end UI framework kit (12) integrates mustache as the kitjs template engine. The basic syntax is $ {varname}

No.: kitjs officially discussed the establishment of the QQ group and QQ Group No. 88093625. You are welcome to join the discussion on front-end topics.

Kit integrates the excellent JavaScript template engine mustache and serves as the template module. The basic syntax is $ {varname}

Demo address: http://xueduany.github.com/KitJs/KitJs/index.html#template

Jsdoc address: http: // localhost/jsdoc/out/$kit.template.html

The basic usage is as follows, if you want to learn more special usage, please visit the mustache official website http://mustache.github.com/

1. Replace $ {name} with simple variables}

 
Function _ A1 () {$ kit. el ('# a1 '). innerhtml = $ kit. template. render ('$ {name} is awesome', {Name: '<B style = "color: Red"> Willy </B> '});}
 

2. If the variable contains HTML Code For example: <br>, <tr>, and so on. You can use $ {& name} Instead of escaping}

 
Function _ A2 () {$ kit. el ('# A2 '). innerhtml = $ kit. template. render ('$ {& name} is awesome', {Name: '<B style = "color: Red"> Willy </B> '});}
 

3. If it is an object, it can also explain its attributes.

Function _ A3 () {$ kit. el ('# A3 '). innerhtml = $ kit. template. render ("name :$ {name. first} $ {name. last}, age :$ {age} ", {" name ": {" first ":" Chen "," last ":" Jackson "}," Age ": 18 });}
 

4. The $ {# Param} label is very powerful and has the if judgment and foreach functions.

 
Function _ A4 () {$ kit. El ('# A4'). innerhtml = $ kit. template. Render ("shown. $ {# nothin} Never shown! $ {/Nothin} ", {" nothin ": true });}
 

If nothin is null, null, or false, shown is output. Otherwise, shown. Never shown is output !.

5. Iteration

 
Function _ A5 () {$ kit. El ('# A5'). innerhtml = $ kit. template. Render ("$ {# stooges}$ {Name}$ {/Stooges} ", {" Stooges ": [{" name ":" Moe "},{" name ":" Larry "},{" name ": "Curly"}]});}
 

6. If an array is iterated, you can use $ {.} to replace each element.

 
Function _ A6 () {$ kit. el ('# A6 '). innerhtml = $ kit. template. render ("$ {# Musketeers} * $ {&.} $ {/Musketeers} ", {" musketeers ": [" Athos "," Aramis "," Porthos "," d 'Artagnan "]});}
 

7. The iterative output can also be the result returned by a function. The function can read the context of the current variable to obtain other attributes and perform other operations.

 
Function _ A7 () {$ kit. el ('# A7 '). innerhtml = $ kit. template. render ("$ {# Beatles} * $ {name} $ {/Beatles}", {"Beatles": [{"firstname": "John", "lastname ": "Lennon" },{ "firstname": "PAUL", "lastname": "McCartney" },{ "firstname": "George", "lastname ": "Harrison" },{ "firstname": "ringo", "lastname": "Starr"}], "name": function () {return this. firstname + "" + this. lastname ;}});}
 

8: The expression in the variable can be executed again in the method.

 
Function _ A8 () {$ kit. el ('# A8 '). innerhtml = $ kit. template. render ("$ {# bold} Hi $ {name }. $ {/bold} ", {" name ":" $ {age} "+" Tater "," bold ": function () {return function (text, render) {console. log (text); return""+ Render (text) +"";};}," Age ": 18 });}
 

9. {^} is opposite to {#}. If the variable is null, undefined, false, or an empty array, the output result is 10 .{{! } Comment