背景 最近使用ELK的sentinl進行告警配置，sentinl的郵件通知支持mustache，藉此機會學習了mustache相關知識，記錄在此。 mustache的思想 mustache的核心是標簽和logic less. 標簽: 定義模板的時候,使用了{{name}}、{{ systems}}{ ...
背景
最近使用ELK的sentinl進行告警配置，sentinl的郵件通知支持mustache，藉此機會學習了mustache相關知識，記錄在此。
mustache的思想
mustache的核心是標簽和logic-less.
標簽: 定義模板的時候,使用了{{name}}、{{#systems}}{{/systems}}標記. 這就是mustache的標簽,只不過用{{}}替代了<>,以免和html標簽的<>混淆.
Logic-less:輕邏輯,因為在定義模板的時候不會使用if-else,不會有迴圈式編碼,一切都用標簽來解決.
標簽包含:
- {{prop}}: 將數據源對象上prop屬性對應的值,轉換成字元串輸出.
- {{{prop}}} ——不進行特殊字元轉義,保持內容原樣輸出
- {{#prod}}{{/prop}}
- {{^prop}}{{/prop}}
- {{.}} ——表示枚舉,可以迴圈輸出整個數組
- {{>partials}} ——以>開始表示子模塊
- {{!comments}} ——註釋
{{prop}}標簽
mustache渲染{{prop}}標簽的邏輯:
1)如果prop引用的值上null或者undefined,則渲染成空串;
2)如果prop引用的是一個函數,則在渲染的時候自動執行這個函數,並把函數返回值作為渲染結果.
3)其他場景,直接把prop引用的值轉換成字元串作為渲染結果.
預設情況下,mustache在渲染prop時,都是對prop的原始值進行url編碼或者html編碼之後再輸出,所以會把"\"轉成html實體符.
console.log(Mustache.render(tpl1, {
prop: function () {
return 'it\'s a fun'
}
}));//-it's a fun-如果要阻止這種編碼行為,只要把標簽改成{{{prop}}}就可以.
{{#prop}}{{/prop}}標簽
這對標簽作用非常大,可以同時完成if-else和for-each以及動態渲染的模版功能. 在這對標簽之間,可以定義其他模板內容,嵌套所有標簽.
1)if-else渲染
只有prop屬性在數據源對象上存在,並且不為falsy值(javascript6個falsy值:null, undefined, NaN, 0, false, 空字元串), 並且不為空數組的情況下, 標簽之間的內容才會被渲染,否則都不會被渲染.
prop屬性引用的是一個函數的時候,{{#prop}}會自動調用這個函數,並把函數的返回值作為if-else渲染邏輯的判斷依據,也就是如果函數返回的是falsy值或者是空數組的時候,這對標簽之間的內容還是不會顯示.
2)for-each渲染
當prop屬性引用的是一個非空數組時,這對標簽之間的內容將會根據數據大小進行迭代,並且當數組元素為對象時,還會把該對象作為每一次迭代的上下文,以便迭代時的標簽可以直接引用數組元素上的屬性.
3)動態渲染
當prop屬性所引用的是一個函數, 並且這個函數的返回值還是一個函數的話, mustache會再次調用這個返回的函數,並給它傳遞2個參數:text表示原來的目標內容,render表示mustache內部的執行渲染的對象, 以便在這個函數內容可以通過render對象結合原來的模版內容,自定義渲染的邏輯,並且把函數的返回值作為渲染結果(這個返回值渲染的邏輯根{{prop}}標簽完全一樣).
{{^prop}}{{/prop}}標簽
這對標簽,與{{#prop}}{{/prop}}的if-else渲染執行相反邏輯,即只有在prop屬性不存在或者引用的是一個falsy值,或者是空數組才會顯示標簽之間的內容.
