Mustache 使用心得總結

Mustache 使用心得總結

前言：

之前的一個項目裡面就實用到這個前台的渲染模版，當時挺忙的也沒時間抽出時間總結一下，剛好上周項目裡又用到這個輕量型的渲染模版，真心感覺非常好用，是以就總結一下使用心得，算是一個入門級别的指引吧。

1.  Mustache 概述

Mustache是基于JavaScript實作的模版引擎，類似于JQuery Template，可是這個模版更加的輕量級，文法更加的簡單易用，非常easy上手。

2.  Mustache 詳細的使用

以下就詳細講一下Mustache的使用。在開始講之前，須要先從git hub上擷取相關的mustache.js檔案，擷取檔案之後，建立一個解決方式，檔案夾例如以下：

然後就開始詳細的使用，首先須要在頁面的head标簽内引用Jquery.js 和Mustache.js兩個腳本檔案，主要有下面幾個方面（下面示範的方法均在head标簽中的script代碼塊中）：

2.1          簡單的對象綁定展示

l  代碼示範樣例：

$(function () {
            var user = { name: "Olive", age: 23, sex: "girl" };
            var template = "My name is  {{name}} ,I'm  {{age}} ,Sex is {{sex}}";
            var view = Mustache.render(template, user);
            $("#user_info").html(view);
      

　　

l  頁面呈現效果：

l  文法解釋：

                         i.              Mustache的文法非常easy，用兩個大括号标記要綁定的字段就可以，“{{}}”；

                       ii.              大括号内的字段名稱要和Mustache.render方法中的第二個參數中的對象的屬性名一緻

                      iii.              基本的渲染方法為Mustache.render，該方法有兩個參數，第一個為要渲染的模版，也就是上例中的template，第二個就是資料源也就是上例中的user對象

2.2          對象數組循環渲染展示

var users = { result: [{ name: "Only", age: 24, sex: "boy" },
                                   { name: "for", age: 24, sex: "boy" },
                                   { name: "Olive", age: 23, sex: "girl" }
                                   ]
            };
            var template = "<div><table cellpadding=0 cellspacing=0 class='tb' ><tr><td>Name</td><td>Age</td><td>Sex</td></tr>{{#result}}<tr><td>{{name}}</td><td>{{age}}</td><td>{{sex}}</td></tr>{{/result}}</table><div>";
            var views = Mustache.render(template, users);
            $("#users_info").html(views);      

           i.              對于對象資料Mustache也有其特殊的文法：{{#}}{{/}}，假設所給定的資料源是一個對象數組，則能夠使用該文法，非常友善的用來循環展示。

         ii.              當中{{#}}标記表示從該标記以後的内容所有都要循環展示

        iii.              {{/}}标記表示循環結束。這樣的情況多用于table行的展示。

2.3          推斷對象為null（false/undefined）展示

var users = { result: [{ name: null, age: 24, sex: "boy" },
                                  { name: "for", age: 24, sex: "boy" },
                                   { name: "Olive", age: 23, sex: "girl" }
                                  ]
            };
            var template = "<div><table cellpadding=0 cellspacing=0 class='tb' ><tr><td>Name</td><td>Age</td><td>Sex</td></tr>{{#result}}<tr><td>{{#name}}{{name}}</td><td>{{age}}</td><td>{{sex}}{{/name}}</td></tr>{{/result}}</table><div>";
            var views = Mustache.render(template, users);
           $("#users_info1").html(views);      

           i.              上邊我們有講到{{#}}{{/}}這種文法，除了上邊的循環周遊之外，它還有另外的一層意思就是判空，假設{{#}}中的值為null或false或undefine則其标記内的内容則不展現

         ii.              在代碼示範樣例中，users對象中的第一個對象名為null，是以在展示時，該條使用者資訊沒有被展示。

        iii.              有了判空的方法當然還有與之相反的方法{{^}}，該方法表示的意思與{{#}}意思相反。

2.4 防止html轉義展示

var user = { name: "<h1>Olive</h1>" };
           var template = "my name is {{name}}";
            var view = Mustache.render(template, user);
            $("#user_name").html(view);       

假設不在{{}}中加&，則效果例如以下：