微信小程序开发技术教程之Mustache语法要点总结

开发人员在做小程序开发的时候，会在wxml里，用到Mustache语法。而Mustache其实就是一个logic-less（轻逻辑）模板解析引擎，它是为了使用户界面与业务数据（内容）分离而产生的，可生成特定格式的文档，通常是标准的HTML文档。小程序的wxml中的代码编写就会用到这种语法。所以，在开发小程序之前，开发者可以先研究一下Mustache语法的几个模板，下面我们就一起来看一下这六大模板的内容。

  1、{{keyName}}

  这种Mustache语法的模板可以分成三种类型来说明，不同情况下就需要用到不同的写法，它们分别为：

 （1）简单的变量替换：{{name}}，示例代码如下：

var data = { "name": "weChat" };

Mustache.render（"{{name}} is excellent."，data）;

成功返回

weChat is excellent.

 （2）变量含有html的代码，如：“、”等而不想转义，可以在用{{&name}}，示例代码如下：

var data = {

     "name" : "<br>weChat<br>"

};

var output = Mustache.render("{{&name}} is excellent.", data);

console.log(output);

成功返回

<br>weChat<br> is excellent.

去掉“&”的返回是转义为，还可以用{{{ }}}代替{{&}}。：

<br>weChat<br> is excellent.

 （3）声明对象属性，示例代码为：

var data = {

               "name" : {

               "first" : "Chen"，

               "last" : "Jackson"

               }，

               "age" : 18

          };

var output = Mustache.render(

            "name:{{name.first}} {{name.last}}，age:{{age}}", data);

console.log(output);

返回

name:Chen Jackson，age:18

2、{{#keyName}} {{/keyName}}

以#开始、以/结束表示区块，根据当前上下文中的键值来对区块进行一次或多次渲染。它的功能很强大，有类似if、foreach的功能。示例代码如下：

var data = {

    "stooges" : [ {

        "name" : "Moe"

    }， {

        "name" : "Larry"

    }， {

        "name" : "Curly"

    } ]

};

var output = Mustache.render("{{＃stooges}}<b>{{name}}</b>{{/stooges}}"，

                 data);

console.log(output);

返回：

<b>Moe</b>

<b>Larry</b>

<b>Curly</b>

3、{{^keyName}} {{/keyName}}

这种语法模板与{{#keyName}} {{/keyName}}类似，其中的不同点，是这个模板中，当keyName值为null, undefined, false时才渲染输出该区块内容。示例代码如下：

var data = {

              "name" : "<br>weChat<br>"

          };

     var tpl = ‘{{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}}’;

     var output = Mustache.render(tpl, data);

返回：

没找到 nothing 键名就会渲染这段

4、{{.}}

{{.}}这个模板表示的是枚举，可以循环输出整个数组，示例代码如下：

var data = {

     "product": ["Macbook ","iPhone ","iPod ","iPad "]

}

var tpl = '{{#product}} <p>{{.}}</p> {{/product}}';

var html = Mustache.render(tpl, data);

返回：

<p>Macbook </p> <p>iPhone </p> <p>iPod </p> <p>iPad </p>

5、{{!  }}

{{!  }}这个模板表示的是注释。

6、{{>partials}}

这个模板，是以>开始表示子模块，当结构比较复杂时，使用该语法，可以将将复杂的结构，拆分成几个小的子模块。