基本使用方法:
{ "name": "Chris", "company": "<b>GitHub</b>" }
template | output |
1、 {{name}} 2、 {{age}} //数据中没有age,输出为空 3、 {{company}} //会转义 4、 {{{company}}} //不会转义 5、 {{&company}}
|
1、 Chris 2、 3、 <b>GitHub</b> 4、 <b>GitHub</b> 5、 <b>GitHub</b> 6、 {{company}}
|
Sections
怎么定义:一个叫做person的Section: {{#person}}这里的内容都是属于person这个section的代码段:block {{/person}}
1、如果person变量不存在,或者person的值为null
, undefined
, false
, 0
, NaN
, empty string or an empty list
那么这个Section之间的所有内容都不会显示。这个可以用来控制那些代码片段不显示。
2、如果person变量的值不为null
, undefined
, or false
, and is not an empty list,那么这个block会被渲染。如果是数组,会迭代渲染。
其中,有几种经典用法:
说明 | 数据 | template | output |
当循环数组时 . 表示current item in the list |
{ "musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"] }
|
{{#musketeers}} * {{.}} {{/musketeers}}
|
* Athos * Aramis * Porthos * D'Artagnan
|
输入的数据可以为函数,这时候调用这个数据 就可以达到调用函数的功能。 this之前遍历的当前对象 |
{ "beatles": [ { "firstName": "John", "lastName": "Lennon" }, { "firstName": "Paul", "lastName": "McCartney" }, { "firstName": "George", "lastName": "Harrison" }, { "firstName": "Ringo", "lastName": "Starr" } ], "name": function () { return this.firstName + " " + this.lastName; } } |
{{#beatles}} * {{name}} {{/beatles}}
|
* John Lennon * Paul McCartney * George Harrison * Ringo Starr
|
Inverted Sections
{{^person}}code block {{/person}}
这个和section类似,区别是:当person的值为null
, undefined
, false
, falsy or an empty list.的时候才会渲染。