mustache 模板,用于构造html页面内容。在实际工作中,当同一个模板中想要调用不同的函数来渲染画面,在已经自定义好了的前提下,可以在渲染页面时对传入的参数进行手动判断。【在不好判断的情况下,我们可以通过改变传入参数来进行判断】跟小白我来看看该模板的语法吧。
Mustache 的模板语法很简单,就那么几个:
1 2 3 4 5 6 7 | { {data}} { {#data}} { {/data}} { {^data}} { {/data}} { {.}} { {<partials}} { { {data}}} { {!comments}} |
借助 Demo 来对语法做简单的介绍:
1 ... 2 3 19 ...
{ {data}}
{ {}}
就是 Mustache 的标示符,花括号里的 data 表示键名,这句的作用是直接输出与键名匹配的键值,例如:
1 var tpl = '{ {name}}';2 var html = Mustache.render(tpl, data);3 //输出:4 xiaohua
{ {#data}} { {/data}}
以#
开始、以/
结束表示区块,它会根据当前上下文中的键值来对区块进行一次或多次渲染,例如改写下 Demo 中的 tpl:
1 var tpl = '{ {#msg}}{
{sex}},{ {age}},{ {hobit}} { {/msg}}';2 var html = Mustache.render(tpl, data);3 4 //输出:5female, 22, reading
注意:如果{ {#data}} { {/data}}
中的 data 值为 null, undefined, false;则不渲染输出任何内容。
{ {^data}} { {/data}}
该语法与{ {#data}} { {/data}}
类似,不同在于它是当 data值为 null, undefined, false 时才渲染输出该区块内容。
1 var tpl = { {^nothing}}没找到 nothing 键名就会渲染这段{ {/nothing}};2 var html = Mustache.render(tpl, data);3 //输出:4 没找到 nothing 键名就会渲染这段
{ {.}}
{ {.}}
表示枚举,可以循环输出整个数组,例如:
1 var tpl = '{ {#subject}}{
{.}} { {/subject}}';2 var html = Mustache.render(tpl, data);3 //输出:4Ch
En
Math
physics
{ {>partials}}
以>
开始表示子模块,如{
1 var tpl = "{ {namme}}
- { {>msg}}
xiaohua
6- 7
- female 8
- 22 9
- reading 10
{ { {data}}}
{ {data}}
输出会将等特殊字符转译,如果想保持内容原样输出可以使用{ { {}}}
,例如:
1 var tpl = '{ {#msg}}{
{ {age}}} { {/msg}}'2 //输出:322
{ {!comments}}
!
表示注释,注释后不会渲染输出任何内容。
1 { {!这里是注释}}2 //输出:
在工作中,如果页面上的内容是从后台获取数据并渲染到页面上时,我们就可以使用mustache模板了,值得注意的是,render的数据一定要与键名相符合。
1 | <br><br><br><br> |