mustache 的使用
阿新 • • 發佈：2019-01-31
前些日子做個H5嵌入手機的應用，用到了mustache.js,於是就做個如下的簡單介紹，如有錯誤請指出，萬分感謝。最後會把專案中的如何用怎麼用會貼出部分程式碼。
mustache.js 它是一個javascript的模板引擎庫，就像java模板引擎velocity一樣，只是提供展示資訊的模板，其語法簡單明瞭，容易上手。一個簡單的demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title> 1. {{name}}
{{ }}就是 mustache 輸出值得簡單格式，花括號中為json的key值。直接執行上述html，會看到結果為：wb2. {{#major}} {{/major}}
以#開始、以/結束表示區塊，可以一次或多次渲染內容有if、foreach功能。修改如下：
<script id='template'>{{#major}}{{.}}{{/major}}</script>
輸出：數學 計算機
注意：如果{{#major}}{{/major}}中的 major值為 null, undefined, false；則不渲染輸出任何內容。3. {{^car}} {{/car}}
和第2個語法差不多，只不過當值為 null, undefined, false 時才渲染輸出該區塊內容。
<script id='template'>{{^car}}
"當值為 null, undefined, false 時才渲染輸出該區塊內容";
{{/car}}</script>
輸出：當值為 null, undefined, false 時才渲染輸出該區塊內容 4. {{.}}
表示集合中的列舉，如例項25. {{>parent}}
以>符號表示子模組，可以將複雜的結構拆分為多個子模組。如下：
<script id='template'>
<ul>
{{>msg}}
</ul>
</script>
var son = {"msg":"{{#msg}} <li>{{hate}}</li> <li>{{love}}</li> {{/msg}}"}
$("#box").append(Mustache.render($('#template').html(),data,son));
輸出：
dog
beautiful girl6. {{!comments}}
以!開頭，為註釋說明內容，不渲染該內容，如下：
<script id='template'>{{!這裡是註釋}}{{name}}</script>
輸出：wb下面是在專案中的應用：
1. 通過ajax，返回資料data，成功後遍歷data。js檔案：
var feedbackList = [];
//遍歷列表
for(var i=0;i<data.list.length;i++){
var id = data.list[i].id;
var createTimeStr = data.list[i].createTimeStr;
var questionDesc = data.list[i].questionDesc;
var billTypeName = data.list[i].billTypeName;
var billCode = data.list[i].billCode;
// 放入預先準備好的集合中 feedbackList.push({"id":id,"createTimeStr":createTimeStr,"questionDesc":questionDesc,"billTypeName":billTypeName,"billCode":billCode});
}
var renderData = {"feedbackList":feedbackList};
$(".recordBox").append(Mustache.render($('#template').html(), renderData));
- 渲染html上的模板：
<div class="recordBox">
<script type='text/x-mustance' id='template'>{{#feedbackList}}
<div class='tab'>
<div class='e-row recordItem'>
<a href='/feedback/queryDetail?id={{id}}'>
<h4><b>{{createTimeStr}}</b><span>NO.{{id}}</span></h4>
<p>{{questionDesc}}</p>
<div>{{#billTypeName}}{{billTypeName}}:{{billCode}}{{/billTypeName}}</div>
</a>
</div>
</div>
{{/feedbackList}}</script>
</div>