javascript庫之Mustache庫使用說明

一、簡單示例

代碼：

            function show(t) {
                $("#content").html(t);
            }

            var view = {
                title: 'YZF',
                cacl: function () {
                    return 6 + 4;
                }
            };
            $("#content").html(Mustache.render("{{title}} spends {{cacl}}", view));

結果：

YZF spends 10

 

結論：

可以很明顯的看出Mustache模板的語法，只需要使用{{和}}包含起來就可以了，里面放上對象的名稱。

通過本示例也可以看出，如果指定的屬性為函數的時候，不會輸出函數里面的內容，而是先執行函數，然后將返回的結果顯示出來。

 

 二、不轉義html標簽

代碼：

            var view = {
                name: "YZF",
                company: "<b>ninesoft</b>"
            };
            show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));

 結果：

 

結論：

通過這個示例可以看出Mustache默認是會將值里面的html標記進行轉義的，但是有時候我們並不需要。

所以這里我們可以使用{{{和}}}包含起來，或者是{{&和}}包含，那么Mustache就不會轉義里面的html標記。

 

三、綁定子屬性的值

代碼：

            var view = {
                "name": {
                    first: "Y",
                    second: "zf"
                },
                "age": 21
            };
            show(Mustache.render("{{name.first}}{{name.second}} age is {{age}}", view));

 結果：

 

結論：

相信看到第一個示例的時候，就會有人想到能不能綁定子屬性，如果你努力看下去了。

那么祝賀你，現在就是解決你的需求的方式，僅僅只需要通過.來使用子屬性即可。

 

四、條件式選擇是否渲染指定部分

代碼：

            var view = {
                person: false
            };
            show(Mustache.render("eff{{#person}}abc{{/person}}", view));

 結果：

 

結論：

問題總是不斷，如果我們還需要能夠根據我們給的值，決定是否渲染某個部分。

那么現在就可以解決這個問題，當然還要提示的就是不僅僅是false會導致不渲染指定部分。

null，空數組，0，空字符串一樣有效。語法上面比較簡單，就是使用{{#key}} ... {{/key}}

來控制中間的內容。

 

五、循環輸出

代碼：

            var view = {
                stooges: [
                    { "name": "Moe" },
                    { "name": "Larry" },
                    { "name": "Curly" }
                ]
            };
            show(Mustache.render("{{#stooges}}{{name}}<br />{{/stooges}}", view));

結果：

 

結論：

僅僅學會上面的方式，大部分地方你都解決了，但是還是會出現麻煩的地方。

就是循環輸出，如果你一個一個寫，相信會很煩躁，當然Mustache不會讓我們失望，

它也給出了如何循環輸出的方式，這里是將一個由對象組成的數組輸出，如果我們

輸出的是數組，就需要使用{{.}}來替代{{name}}。

 

六、循環輸出指定函數處理后返回的值

代碼：

            var view = {
                "beatles": [
                    { "firstname": "Johh", "lastname": "Lennon" },
                    { "firstname": "Paul", "lastname": "McCartney" }
                ],
                "name": function () {
                    return this.firstname + this.lastname;
                }
            };
            show(Mustache.render("{{#beatles}}{{name}}<br />{{/beatles}}", view));

 結果：

 

結論：

循環輸出是有了，但是我們還想后期進行加工。那么這個完全符合你的需要，因為Mustache會將

數組中的值傳遞給你的函數，輸出你函數返回的值。這里我們可以看到最外層是數組，只要在里面

使用函數那么外層的數組就會作為這個函數的參數傳遞進去。

 

七、自定義函數

代碼：

            var view = {
                "name": "Tater",
                "bold": function () {
                    return function (text, render) {
                       return render(text) + "<br />";
                    }
                }
            }
            show(Mustache.render("{{#bold}}{{name}}{{/bold}}", view));

 結果：

 

結論：

上面我們都是用的變量作為節，那么我們現在用函數作為節，會有什么效果呢。

它會調用我們函數返回的函數，將節中間的原始字符串作為第一個參數，默認

的解釋器作為第二個參數，那么我們就可以自行加工。

 

八、反義節

代碼：

var view = {
                "repos": []
            };
            show(Mustache.render("{{#repos}}{{.}}{{/repos}}{{^repos}}no repos{{/repos}}", view));

 結果：

 

結論：

上面我們也用節，但是僅僅只能選擇是否輸出某個部分。所以這里我們彌補一下。

如果我們使用了{{^和}}來定義節的話，那么這個部分只會在里面的值為空，null，

空數組，空字符串的時候才會顯示。那么我們就可以實現了if else的效果了。

 

九、部分模板

代碼：

            var view = {
                names: [
                    { "name": "y" },
                    { "name": "z" },
                    { "name": "f" }
                ]
            };
            var base = "<h2>Names</h2>{{#names}}{{>user}}{{/names}}";
            var name = "<b>{{name}}</b>";
            show(Mustache.render(base, view, { user: name }));

 結果：

 

結論：

Mustache雖然節約了很多時間，但是我們定義了很多模板，但是彼此之間無法互相嵌套使用，也會造成繁瑣。

所以這里我們還要介紹如何定義部分模板，用來在其他模板里面使用，這里使用其他模板的方式僅僅是{{>templetename}}。

最大的不同就是Mustache.render方法有了第三個參數。

 

十、預編譯模板

代碼：

            Mustache.parse(template);
            //其他代碼
            Mustache.render(template,view);

 

結論：

模板既然有好處，也有壞處。就是編譯模板需要時間，所以在我們已知會使用某個模板的前提下，我們可以預先編譯好這個模板，以便后面的使用。