mustache 使用方法簡介

jQuery mustache 模板引擎
使用方法介紹

簡介

Mustache是一個相當著名的模板引擎，所謂的模板引擎就是為了將使用者介面(HTML)與業務邏輯(JS)分離而產生的，它可以生成特定格式的文件，這樣可以讓美術/程式設計師分工處理上更佳的流暢。

今天要介紹的Mustache它提供許多種語言的版本，詳細細節請參考官方網站。


 http://mustache.github.com

今天使用的範例是Mustache在jQuery上提供的插件，所以在說明接下來的範例前，必須先下載下列檔案

jquery.min.js
jquery.mustache.js


http://code.jquery.com/jquery-1.7.2.min.js
https://github.com/janl/mustache.js/blob/master/mustache.js

範例一簡單樣板


// 範例一
var sample1 = "";
sample1 += 'Hello {{name}}';
sample1 += 'You have just won ${{value}}!';

var data1 = {
 name : "Chris",
 value : 10000,
}

var result1 = $.mustache(sample1, data1);

console.log(result1);

輸出


Hello Chris
You have just won $10000!

在mustache中，我們將模板以外的參數使用小鬍子{{}}包住，呼叫mustache時，自動會去獲取對應的物件的key及value值，然後塞入到模板中，這個範例將data1提供的name屬性的值塞入模板的{{name}}裡頭。

範例二 true/false判斷


// 範例二 ture/false 判斷
var sample2 = "";
sample2 += 'Hello {{name}}';
sample2 += 'You have just won ${{value}}!';
sample2 += '{{#in_ca}}';
sample2 += 'Well, ${{taxed_value}}, after taxes.';
sample2 += '{{/in_ca}}';
var data2 = {
 name : "Chris",
 value : 10000,
 taxed_value : 10000 - (10000 * 0.4),
 in_ca : true
}

var result2 = $.mustache(sample2, data2);

console.log(result2);

輸出


Hello Chris
You have just won $10000!
Well, $6000.0, after taxes.

這第二個範例中使用了{{#in_ca}}，這個表示如果in_ca的值為true時就會將{{#in_ca}}content{{/in_ca}}內的模板輸出，相反的若為false將不輸出。所以要判斷true/false使用{{#}}及{{/}}

範例三啟用/禁止Mustache編碼


// 範例三 啟用/禁止Mustache編碼機制
var sample3 = "";
sample3 += '{{name}}';
sample3 += '{{age}}';
sample3 += '{{company}}';
sample3 += '{{{company}}}';
sample3 += '{{&company}}';

var data3 = {
 name : "Chris",
 company : "<b>GitHub</b>"
}

var result3 = $.mustache(sample3, data3);

console.log(result3);

輸出


* Chris
*
* &lt;b&gt;GitHub&lt;/b&gt;
* <b>GitHub</b>

在範例三中，我們會發現使用{{}}塞入模板的內容會被編碼，如果要避免被mustache編碼我們的內容時可以使用{{{content}}}，或是使用{{&content}}的方法保持不變。

範例四 Non-Empty List


// 範例四 Non-Empty List
var sample4 = "";
sample4 += '{{#repo}}';
sample4 += '{{name}}';
sample4 += '{{/repo}}';

var data4 = {
  repo: [
    { name: "resque" },
    { name: "hub" },
    { name: "rip" },
  ]
}

var result4 = $.mustache(sample4, data4);

console.log(result4);

輸出


<b>resque</b>
<b>hub</b>
<b>rip</b>

在範例四中，我們使用與true/false相同的寫法來處理陣列的迴圈(mustache會自己判斷)，這個範例我們塞入迴圈的是個物件陣列，所以我們可以在回圈內多使用一層mustache表達式將陣列物件的值取出。

範例五使用Lambda


// 範例五 使用Lambda
// 甚麼是 Lambda? http://stackoverflow.com/questions/16501/what-is-a-lambda-function
var sample5 = "";
sample5 += '{{#wrapped}}';
sample5 += ' {{name}}';
sample5 += '{{/wrapped}}';

var data5 = {
  name: "Willy",
  wrapped: function() {
    return function(text) {
      return "" + text + ""
    }
  }
}

var result5 = $.mustache(sample5, data5);

console.log(result5);

輸出


<b>Willy is awesome.</b>

在範例五中我使用了Lambda function的方式將模板的內容包上(wrap)一層外皮，通常處理包皮這樣的函式稱作Lambda。

範例六 Empty list catch


// 範例六 Empty List Catch
var sample6 = "";
sample6 += '{{#repo}}';
sample6 += '{{name}}';
sample6 += '{{/repo}}';
sample6 += '{{^repo}}';
sample6 += 'No repos :(';
sample6 += '{{/repo}}';

var data6 = {
  repo: [
  ]
}

var result6 = $.mustache(sample6, data6);

console.log(result6);

輸出


No repos :(

範例六中，我們可以針對空的陣列使用不同的模板處理，例如"Sorry,找不到您要的資料，如有相關問題請..."，而不是"搜尋到0筆資料"，捕捉空陣列的方式為{{^}}。

大致上mustache常用的功能介紹到這邊，至於網路上其他很多文章可能會介紹如何在mustache加入許多複雜的功能，筆者認為這並不是模板引擎該處理的事情，這樣會讓模板更加的複雜，所以強烈否定，因為模板引擎的目的就是把業務等複雜邏輯切開而生的呀!

ITseer - 資訊知識分享 | 程式技術討論

2012年3月31日