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