mustache 模板，用於建構html頁面內容。在實際工作中，當同一個範本中想要呼叫不同的函數來渲染畫面，在已經自訂好了的前提下，可以在渲染頁面時對傳入的參數進行手動判斷。 【在不好判斷的情況下，我們可以透過改變傳入參數來進行判斷】跟小白我來看看該模板的語法吧。 Mustache 的模板文法很簡單，就那麼幾個： {{data}} {{#data}} {{/data}} {{^data}} {{/data}} {{.}} {{ 借助 Demo 來對文法做簡單的介紹： 1 ... 2 34b71d4dca0bef2a033161a097f3707f2cacc6d41bbb37262a98f745aa00fbf0 3 4ec11beb6c39d0703d1751d203c17053 4 var data = { 5 "name": " xiaohua ", 6 "msg": { 7 "sex": " female ", 8 "age": " 22 ", 9 "hobit": " reading " 10 }, 11 "subject": ["Ch","En","Math","physics"] 12 } 13 14 var tpl = 'e388a4556c0f65e1904146cc1a846bee {{name}}94b3e26ee717c64999d7867364b1b4a3'; 15 var html = Mustache.render(tpl, data);16 17 alert ( html ); 18 2cacc6d41bbb37262a98f745aa00fbf0 19 ... {{data}} {{}}就是 Mustache 的標示符，花括號裡的 data 表示鍵名，這句話的作用是直接輸出與鍵名相符的鍵值，例如： 1 var tpl = '{{name}}'; 2 var html = Mustache.render(tpl, data); 3 //输出： 4 xiaohua {{#data}} {{/data}} 以#開始、以/結束表示區塊，它會根據當前上下文中的鍵值來對區塊進行一次或多次渲染，例如改寫 Demo 中的 tpl： 1 var tpl = '{{#msg}} e388a4556c0f65e1904146cc1a846bee{{sex}},{{age}},{{hobit}}94b3e26ee717c64999d7867364b1b4a3 {{/msg}}'; 2 var html = Mustache.render(tpl, data); 3 4 //输出： 5 e388a4556c0f65e1904146cc1a846bee female, 22, reading94b3e26ee717c64999d7867364b1b4a3 注意：如果{{#data}} {{/data}}中的 data 值為 null, undefined, false；則不渲染輸出任何內容。 {{^data}} {{/data}} 該語法與{{#data}} {{/data}}類似，不同在於它是當 data值為 null, undefined, false 時才渲染輸出該區塊內容。 1 var tpl = {{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}}; 2 var html = Mustache.render(tpl, data); 3 //输出： 4 没找到 nothing 键名就会渲染这段 {{.}} {{.}}表示枚舉，可以循環輸出整個數組，例如： 1 var tpl = '{{#subject}} e388a4556c0f65e1904146cc1a846bee{{.}}94b3e26ee717c64999d7867364b1b4a3 {{/subject}}'; 2 var html = Mustache.render(tpl, data); 3 //输出： 4 e388a4556c0f65e1904146cc1a846beeCh94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beeEn94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beeMath94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beephysics94b3e26ee717c64999d7867364b1b4a3 {{>partials}} 以>開始表示子模組，如{{> msg}}；當結構比較複雜時，我們可以使用該語法將複雜的結構拆分成幾個小的子模組，例如： 1 var tpl = "4a249f0d628e2318394fd9b75b4636b1{{namme}}473f0a7621bec819994bb5020d29372a ff6d136ddc5fdfeffaf53ff6ee95f185{{>msg}}929d1f5ca49e04fdcb27f9465b944689" 2 var partials = {msg: "{{#msg}}25edfb22a4f469ecb59f1190150159c6{{sex}}bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6{{age}}bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6{{hobit}}bed06894275b65c1ab86501b08a632eb{{/msg} 3 var html = Mustache.render(tpl, data, partials); 4 //输出： 5 4a249f0d628e2318394fd9b75b4636b1xiaohua473f0a7621bec819994bb5020d29372a 6 ff6d136ddc5fdfeffaf53ff6ee95f185 7 25edfb22a4f469ecb59f1190150159c6femalebed06894275b65c1ab86501b08a632eb 8 25edfb22a4f469ecb59f1190150159c622bed06894275b65c1ab86501b08a632eb 9 25edfb22a4f469ecb59f1190150159c6readingbed06894275b65c1ab86501b08a632eb 10 929d1f5ca49e04fdcb27f9465b944689 {{{data}}} {{data}}輸出會將等特殊字元轉譯，如果想保持內容原樣輸出可以使用{{{}}}，例如： 1 var tpl = '{{#msg}} e388a4556c0f65e1904146cc1a846bee{{{age}}}94b3e26ee717c64999d7867364b1b4a3 {{/msg}}' 2 //输出： 3 e388a4556c0f65e1904146cc1a846bee2294b3e26ee717c64999d7867364b1b4a3 {{!comments}} !表示註釋，註釋後不會渲染輸出任何內容。 1 {{!这里是注释}} 2 //输出： 在工作中，如果頁面上的內容是從後台獲取資料並渲染到頁面上時，我們就可以使用mustache模板了，值得注意的是，render的資料一定要與鍵名相符。
