[jQuery] mustache使用範例(tutorial)

超實用 mustache 經典範例

---

    不知道什麼是mustache?? 請看此篇 mustache介紹

小提醒:
    使用javascript版本時，若想要使用jquery方式，請記得下載完mustache.js後，確認有無這段，若無請加上以下這段code

;(function($) {
  
  /*
   * ...
   *此區域為mustach檔案內的程式碼
   * ...
   */

  $.mustache = function (template, view, partials) {
    return Mustache.render(template, view, partials);
  };

  $.fn.mustache = function (view, partials) {
    return $(this).map(function (i, element) {
      var template = $(element).html().trim();
      var output = $.mustache(template, view, partials);
      return $(output).get();
    });
  };

})(jQuery);

範例一 mustache基本使用，將放入的變數置入template中顯示出來並且顯示出來

範例1 : js程式碼

var template_1 = "";
template_1 += "{{name}} : Welcome come to Tech A Ride, nice to meet you {{passer}}";
template_1 += "{{passer}} : {{name}}我不會說英文,你可以講中文嗎?";
template_1 += "{{name}} : 沒問題，歡迎你來到Tech A Ride";

var data = { name : "Zam",
             passer : "路人"
};

var output_html = $.mustache(template_1,data);
console.log(output_html);

範例1 : 輸出結果

Zam : Welcome come to Tech A Ride, nice to meet you 路人
路人 : Zam我不會說英文,你可以講中文嗎?
Zam : 沒問題，歡迎你來到Tech A Ride

範例二 mustache if else判斷式使用
    利用if > {{#}}{{/}} else > {{^}}{{/}}，判斷那些程式碼是否要顯示出來。

範例2 : js程式碼

var template_2 = "";
template_2 += "{{#english_mode}}";
template_2 += "{{name}} : {{passer}}, welcome come to Tech A Ride";
template_2 += "{{/english_mode}}";
template_2 += "{{^english_mode}}";
template_2 += "{{name}} : {{passer}}歡迎來到 Tech A Ride";
template_2 += "{{/english_mode}}";
template_2 += "{{passer}} : 你好，{{name}}";

var data = { name : "Zam",
             passer : "路人",
             english_mode : false
};

var output_html = $.mustache(template_2,data);
console.log(output_html);

範例2 : 輸出結果

Zam : 路人歡迎來到 Tech A Ride
路人 : Zam我不會說英文,你可以講中文嗎?

範例三 預防mustache自動編碼
    利用{{{}}} or {{&}}，預防傳進去的變數被編碼。

範例3 : js程式碼

var template_3 = "";
template_3 += "{{techaride}}";
template_3 += "
";
template_3 += "{{{techaride}}}";
template_3 += "
";
template_3 += "{{&techaride}}";

var data = { techaride: "Tech A Ride" };

var output_html = $.mustache(template_3,data);
console.log(output_html);

範例3 : 輸出結果

<b>Tech A Ride</b>
Tech A Ride
Tech A Ride

範例四 當傳進去的值不存在或空值時，則將不會執行或輸出

範例4 : js程式碼

var template_4 = "";
template_4 += "Shown.";
template_4 += "{{name}}";
template_4 += "{{techaride}}";
template_4 += "{{#nothin}}";
template_4 += "
";
template_4 += "Never shown!";
template_4 += "{{/nothin}}";

var data = { name: "",
             techaride: "Tech A Ride" };

var output_html = $.mustache(template_4,data);
console.log(output_html);

範例4 : 輸出結果

Shown.
Tech A Ride

範例五 用傳進去的陣列，做出loop效果
    {{#array}} 區間code {{/array}} 若傳進去的變數是個陣列，則會一直執行區間code直到結束，陣列裡面的值可用{{variable}}將值放入

範例5 : js程式碼

var template_5 = "";
template_5 += "{{#array}}";
template_5 += "{{name}}";
template_5 += "
";
template_5 += "{{/array}}";

var data = { array: [{ name: "Tech A Ride" },
           { name: "Tech A Ride all day" },
           { name: "Do you like Tech A Ride" } ]};

var output_html = $.mustache(template_5,data);
console.log(output_html);

範例5 : 輸出結果

Tech A Ride
Tech A Ride all day
Do you like Tech A Ride

範例六 用Lambda做出包裹外框效果
    {{#wrapped}} 區間程式碼 {{/wrapped}}，若傳進去的wrapped是function，則可以使用Lambda

範例6 : js程式碼

var template_5 = "";
template_5 += "{{#wrapped}}";
template_5 += "{{name}}";
template_5 += "{{/wrapped}}";

var data = { "name": "Tech A Ride",
             "wrapped": function() {
                 return function(text) {
                     return "" + render(text) + "" 
                 }
             }
           };

var output_html = $.mustache(template_6,data);
console.log(output_html);

範例6 : 輸出結果

Tech A Ride

來源網站