Mustache教程

Mustache教程

一、简介

Mustache 是一个 logic-less (轻逻辑)模板解析引擎,它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。

二、语法

1. {{keyName}}
{{}}就是 Mustache 的标示符,花括号里的 keyName 表示键名,这句的作用是直接输出与键名匹配的键值

2. {{#keyName}} {{/keyName}}
#开始、以/结束表示区块,它会根据当前上下文中的键值来对区块进行一次或多次渲染,如果{{#keyName}} {{/keyName}}中的 keyName 值为 null, undefined, false;则不渲染输出任何内容。多用于条件判断。如果keyName是一个列表,则会循环显示。

**3. {{^keyName}} {{/keyName}} **
该语法与{{#keyName}} {{/keyName}}类似,不同在于它是当 keyName 值为 null, undefined, false 时才渲染输出该区块内容。

4. {{.}}
{{.}}表示枚举,可以循环输出整个数组,

5. {{!comments}}
!表示注释,注释后不会渲染输出任何内容。

6. {{{keyName}}}
{{keyName}}输出会将等特殊字符转译,如果想保持内容原样输出可以使用{{{}}}

注意区分{{{}}}和{{}}:

mustache模板:
    {{name}}
    {{age}}
    {{company}}
    {{{company}}}
Hash 上下文:
    {
        “name”: “Chris”,
        “company”: “GitHub”
    }
输出:
    Chris
    *
    <b>GitHub</b>
    GitHub
我们一起分析一下模板的输出过程,其中第一个标签被替换为Chris,第二个标签中在整个上下文中不存在,因此不作渲染,第三个我们说过了会被转义,因为有html元素,最后一个如果你想保留html元素就使用三个花括号的形式,这样会被完整的输出。

7. {{>partials}}
>开始表示子模块,如{{> address}};当结构比较复杂时,我们可以使用该语法将复杂的结构拆分成几个小的子模块

以下例子辅助理解:

​ base.mustache文件:

Names

{{#names}} {{> user}} {{/names}}1234

​ user.mustache文件:

{{name}}1

​ 上面是两个mustache的模板文件,在运行的过程中base.mustache使用了user.mustache,上面的效果等同于下面的一个模板文件,有时候我们这么写是为了让功能更集中,提高模板的重用率.

Names

{{#names}} {{name}} {{/names}}

三、设置分隔符号

有些时候我们的确是想修改一下mustache默认的标签分割符号{{}},但是值得庆幸的是,mustache允许我们这样做,而且方法非常简单,我们看一个例子吧

* {{default_tags}}
{{=<% %>=}}
* <% erb_style_tags %>
<%={{ }}=%>
* {{ default_tags_again }}12345

这里有三个标签,第一个采用默认的分隔符号,然后修改成<%%>这样的风格的风格符号,比关切输出标签内容,接下来又还原回{{}}这样的风格然后输出另外一个标签内容.

更多使用细节,可看下面这篇博客: https://blog.csdn.net/cnhome/article/details/80516735

你可能感兴趣的:(前端)