mustache语法

什么是Mustache？

Mustache 是一个轻逻辑的模板语言（Logic-less templates），mustache 是一个 js 模板，用于展示和 js 分离，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。原本是基于 javascript 实现的模板引擎，类似于 freemark 和 valicity，但是比 freemark 和 valicity 更加轻量级更加容易使用，经过拓展目前支持 javascript，java，.NET，PHP，C++ 等多种平台下开发。 

• 项目首页：https://mustache.github.com/ 

• 项目文档：https://mustache.github.com/mustache.5.html 

• Demo:  https://mustache.github.com/#demo 

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

• {{data}}

• {{#data}} {{/data}}

• {{^data}} {{/data}}

• {{.}}

• {{<partials}}

• {{{data}}}

• {{!comments}}

{{data}}

{{}} 就是 Mustache 的标示符，花括号里的 data 表示键名，这句的作用是直接输出与键名匹配的键值，例如：

<script type="text/javascript" src="libs/mustache/mustache.js"></script>
<script type="text/javascript">
    var data = {
        "name": "Bill"
    };

    var html = Mustache.render("<p> {{name}}</p>", data);
    console.debug(html);
    // 输出
    // <p> Bill</p>
</script>

上例，Mustache将使用name的实际值“Bill”去替换 “{{name}}”。

vue广告位

{{#data}} {{/data}}

以#开始、以/结束表示区块，它会根据当前上下文中的键值来对区块进行一次或多次渲染，例如：

<script type="text/javascript" src="libs/mustache/mustache.js"></script>
<script type="text/javascript">
    var data = {
        name: 'Bill',
        address: {
            state: '四川',
            city: '成都',
            area: '高新'
        }
    }

    // 直接使用.的方式取值
    var template = '<p> {{address.state}}省、{{address.city}}市、{{address.area}}区</p>';
    var html = Mustache.render(template, data);
    console.debug(html); // <p> 四川省、成都市、高新区</p>

    // 使用 Mustache 进行处理（类似 with(address){...}）
    template = '{{#address}}<p> {{state}}省、{{city}}市、{{area}}区</p>{{/address}}';
    html = Mustache.render(template, data);
    console.debug(html); // <p> 四川省、成都市、高新区</p>
</script>

注意：如果{{#data}} {{/data}}中的 data 值为 null, undefined, false；则不渲染输出任何内容。

{{^data}} {{/data}}

该语法与 {{#data}} {{/data}} 类似，不同在于它是当 data值为 null, undefined, false 时才渲染输出该区块内容。例如：

<script type="text/javascript" src="libs/mustache/mustache.js"></script>
<script type="text/javascript">
    var data = {
        name: 'Bill'
    }
    var template = '{{^address}} <p> {{state}}省、{{city}}市、{{area}}区</p> {{/address}}';
    var html = Mustache.render(template, data);
    console.debug(html);
    // <p> 四川省、成都市、高新区</p>
</script>

{{.}}

{{.}} 表示枚举，可以循环输出整个数组。例如：

<script type="text/javascript" src="libs/mustache/mustache.js"></script>
<script type="text/javascript">
    var data = {
        names: ['Bill', 'Tom', 'Alan']
    }
    var template = '<ul>{{#names}}<li>{{.}}</li>{{/names}}</ul>';
    var html = Mustache.render(template, data);
    console.debug(html);
    // 输出：
    // <ul><li>Bill</li><li>Tom</li><li>Alan</li></ul>
</script>

{{>partials}}

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

<script type="text/javascript" src="libs/mustache/mustache.js"></script>
<script type="text/javascript">
    var partials = {
        // 定义一个子模板
        msg: '{{#msg}}<li>{{sex}}</li><li>{{age}}</li><li>{{hobit}}</li>{{/msg}}'
    };
    
    var template = '<h1>{{name}}</h1> <ul>{{>msg}}</ul>';
    var html = Mustache.render(template, {
        name: "Bill",
        msg: {
            sex: '男',
            age: '21',
            hobit: '抽烟'
        }
    }, partials);
    console.debug(html)
</script>

输出：
<h1>Bill</h1> 
<ul>
    <li>男</li>
    <li>21</li>
    <li>抽烟</li>
</ul>

其中，ul的内容是从另一个子模板中导入的，即msg子模板。

{{{data}}}

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

<script type="text/javascript" src="libs/mustache/mustache.js"></script>
<script type="text/javascript">
    var html = Mustache.render('<h1>|{{{name}}}|</h1>', {
        name: '<Bill>'
    });
    console.debug(html) // <h1>|<Bill>|</h1>

    html = Mustache.render('<h1>|{{name}}|</h1>', {
        name: '<Bill>'
    });
    console.debug(html) // <h1>|&lt;Bill&gt;|</h1>
</script>

如果使用{{}}则将会对name的<和>进行转义。

{{!comments}}

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

<script type="text/javascript" src="libs/mustache/mustache.js"></script>
<script type="text/javascript">
    var html = Mustache.render('<h1>{{name}}</h1>{{!这是一行注释}}', {
        name: 'Bill'
    });
    console.debug(html) // <h1>Bill</h1>
</script>

参考资料：

https://www.cnblogs.com/DF-fzh/p/5979093.html