Mustache.js語法學習筆記

看了Mustache的github，學學其中的語法，做個筆記

1.簡單的變量替換：{{name}}

var data = { "name": "Willy" };
Mustache.render("{{name}} is awesome.",data);

返回結果 Willy is awesome.

2.如果變量含有html的代碼的，例如：<br>、<tr>等等而不想轉義可以在用{{&name}}

var data = {
            "name" : "<br>Willy<br>"
        };
        var output = Mustache.render("{{&name}} is awesome.", data);
        console.log(output);

結果：<br>Willy<br> is awesome.

去掉"&"的結果是轉義為：&lt;br&gt;Willy&lt;br&gt; is awesome.（默認將"<"和">"轉義）

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

4.{{#param}}這個標簽很強大，有if判斷、forEach的功能。

 

var data = {
                "nothin":true
            };
            var output = Mustache.render(
                    "Shown.{{#nothin}}Never shown!{{/nothin}}", data);
            console.log(output);

如果nothin是空或者null，或者是false都會輸出Shown.相反則是Shown.Never shown!。

5.迭代

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>

6.如果迭代的是數組，還可以用{{.}}來替代每個元素

var data = {
            "musketeers" : [ "Athos", "Aramis", "Porthos", "D'Artagnan" ]
        };
        var output = Mustache.render("{{#musketeers}}* {{&.}}{{/musketeers}}",
                data);
        console.log(output);

輸出：* Athos

        * Aramis

        * Porthos

        * D'Artagnan

7.迭代輸出的還可以是一個function返回的結果，function可以讀取當前變量的上下文來獲取其他屬性執行其他操作

var data = {
            "beatles" : [ {
                "firstName" : "John",
                "lastName" : "Lennon"
            }, {
                "firstName" : "Paul",
                "lastName" : "McCartney"
            }, {
                "firstName" : "George",
                "lastName" : "Harrison"
            }, {
                "firstName" : "Ringo",
                "lastName" : "Starr"
            } ],
            "name" : function() {
                return this.firstName + " " + this.lastName;
            }
        };
        var output = Mustache
                .render("{{#beatles}} *{{name}}{{/beatles}}", data);
        console.log(output);

輸出： *John Lennon

         *Paul McCartney

         *George Harrison

         *Ringo Starr

8：方法里面可以再執行變量中的表達式

var data = {
            "name" : "{{age}}" + "Tater",
            "bold" : function() {
                return function(text, render) {
                    console.log(text);
                    return "<b>" + render(text) + "</b>";
                };
            },
            "age" : 18
        };
        var output = Mustache.render("{{#bold}}Hi {{name}}.{{/bold}}", data);
        console.log(output);

輸出結果：

Hi {{age}}Tater.

<b>Hi 18Tater.</b>

9.{{^}}與{{#}}相反，如果變量是null、undefined、 false、和空數組講輸出結果

10.{{!  }}注釋