mustache语法

小鱼儿 2024-04-18 18:06 60阅读 0赞

Mustache 的模板语法很简单，就那么几个：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>{ {data}}</code> 
     </div> 
     <div> 
      <code>{ {#data}} { {/data}}</code> 
     </div> 
     <div> 
      <code>{ {^data}} { {/data}}</code> 
     </div> 
     <div> 
      <code>{ {.}}</code> 
     </div> 
     <div> 
      <code>{ {&lt;partials}}</code> 
     </div> 
     <div> 
      <code>{ { {data}}}</code> 
     </div> 
     <div> 
      <code>{ {!comments}}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

借助 Demo 来对语法做简单的介绍：

![复制代码][Image 1]

1 ...
     2 <script type="text/javascript" src="mustache.js"></script>
     3 <script type="text/javascript">
     4 var data = {
     5     "name": " xiaohua ",
     6     "msg": {
     7         "sex": " female ", 
     8         "age": " 22 ", 
     9         "hobit": " reading "
     10     },
    11     "subject": ["Ch","En","Math","physics"] 
    12   }  
    13 
    14   var tpl = '<p> {
        {name}}</p>'; 
    15   var html = Mustache.render(tpl, data);
    16 
    17　　alert ( html );
    18 </script>
    19 ...

![复制代码][Image 1]

### \{ \{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}} <p>{
        {sex}},{
        {age}},{
        {hobit}}</p> {
        {/msg}}';
    2 var html = Mustache.render(tpl, data);
    3 
    4 //输出：
    5 <p> female, 22, reading</p>

注意：如果`{ {#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}} <p>{
        {.}}</p> {
        {/subject}}';
    2 var html = Mustache.render(tpl, data);
    3 //输出：
    4 <p>Ch</p> <p>En</p> <p>Math</p> <p>physics</p>

### \{ \{>partials\}\} ###

以`>`开始表示子模块，如\{ \{> msg\}\}；当结构比较复杂时，我们可以使用该语法将复杂的结构拆分成几个小的子模块，例如：

![复制代码][Image 1]

1 var tpl = "<h1>{
        {namme}}</h1> <ul>{
        {>msg}}</ul>"
     2 var partials = {msg: "{
        {#msg}}<li>{
        {sex}}</li><li>{
        {age}}</li><li>{
        {hobit}}</li>{
        {/msg}
     3 var html = Mustache.render(tpl, data, partials);
     4 //输出：
     5 <h1>xiaohua</h1>
     6 <ul>
     7    <li>female</li>
     8    <li>22</li>
     9    <li>reading</li>
    10 </ul>

![复制代码][Image 1]

### \{ \{ \{data\}\}\} ###

`{ {data}}`输出会将等特殊字符转译，如果想保持内容原样输出可以使用`{ { {}}}`，例如：

1 var tpl = '{
        {#msg}} <p>{
        {
        {age}}}</p> {
        {/msg}}'
    2 //输出：
    3 <p>22</p>

### \{ \{!comments\}\} ###

`!`表示注释，注释后不会渲染输出任何内容。

1 {
        {!这里是注释}}
    2 //输出：

在工作中，如果页面上的内容是从后台获取数据并渲染到页面上时，我们就可以使用mustache模板了，值得注意的是，render的数据一定要与键名相符合。

[Image 1]: