Mustache 使用說明
最近在升級SinGooCMS到MVC架構。管理前端使用了Mustache模板，把使用心得記錄一下！
一、官網
http://mustache.github.io/
https://github.com/mustache/mustache.github.com
https://www.bootcdn.cn/mustache.js/
從上面網都能獲取到Mustache.min.js
二、基本語法
{{keyName}}
{{#keyName}} {{/keyName}}
{{^keyName}} {{/keyName}}
{{.}}
{{<partials}}
{{{keyName}}}
{{!comments}}
Mustache的語法很簡單，就上面幾個，{{keyName}}讀取屬性值，{{{keyName}}}讀取屬性值且原樣輸出，即HTML不編碼。{{#keyName}} {{/keyName}}用於遍歷，{{^keyName}} {{/keyName}}反義數據，當keyName不存在、null值，false時起作用。
{{.}}用於遍歷數組
{{!comments}} 注釋
三、使用技巧
1）if-else
{{#name}}...{{/name}} 當name有值時顯示
{{^name}}...{{/name}} 當name為null,undefined,甚至json數據里沒有這個name字段時會顯示
示例：
模板：
<div>{{name}}</div>
數據：
var json = {"result":{}};
此時渲染模板會報錯，提示沒有name屬性。
模板改成如下，即使沒有name也不會報錯。這樣添加和修改就可以共用一個模板了。
{{#result}}
<div>{{name}}</div>
{{/result}}
2）遍歷
常用於顯示異步列表。
var json={"result":{"data":[{"AdName":"廣告1","AdType":"文本廣告"}]},"pager":{}}
{{#data}}
<tr>
<td>{{AdName}}</td>
<input type="number" name="txtSort" value="{{Sort}}" id="txtSort" step="1" />
</tr>
{{/data}}
{{^data}}
<tr><td colspan='7'> 沒有找到任何數據</td></tr>
{{/data}}
//渲染
Mustache.render(tmpl, json.result);
{{#data}}...{{/data}}對應json.result.data里面數據進行遍歷。在沒有值時顯示{{^data}...{{/data}}的內容。
3）json擴展
mustache的邏輯處理很有限，所以在模板里進行判斷是不可能的。比如下拉列表，需要判斷當前選中就實現不了。
那就得在json中打主意。
<select name="ddlADType" id="ddlADType">
{{{droplist}}}
</select>
var json = @Html.Raw(ViewBag.InitData);
json.result.droplist=function(){ //擴展一個字段
var str="";
var arr=new Array("文本廣告","圖片廣告","Flash廣告","視頻廣告");
for(var i=0;i<arr.length;i++)
str+="<option value='"+i+"' "+(json.result.AdType==i?"selected='selected'":"")+" >"+arr[i]+"</option>";
return str;
};
渲染的效果如下，實現了選中狀態
<select name="ddlADType" id="ddlADType">
<option value="0">文本廣告</option>
<option value="1" selected="selected">圖片廣告</option>
<option value="2">Flash廣告</option>
<option value="3">視頻廣告</option>
</select>
4）radio 和 checkbox數據綁定
由於沒有if-else條件判斷，對於表單組可以參照上面組織元素再輸出。
對於單個表單。字段值為bool型可以用以下方法。
<input name="isaudit" type="checkbox" id="isaudit" class="common-check" {{#IsAudit}}checked="checked"{{/IsAudit}} />
5）列表顯示有意義的描述
當json數據有AdType=0時，前台顯示肯定沒有意義。應該顯示為“文本廣告”。前端json可以做如上擴展的判斷，也可以在后台進行處理。
//以下是json的部分需要替換成有意義的描述
Func<int, string> GetEnumDesc = (adType) =>
{
return dataJson.Replace("\"AdType\":" + adType + "", "\"AdType\":\"" + EnumUtils.GetEnumDescription((AdsType)adType) + "\"");
};
foreach (var item in Enum.GetValues(typeof(AdsType)))
{
dataJson = GetEnumDesc((int)item); //把數字轉成枚舉的文字描述
}
dataJson = new Regex(@" (\d+):(\d+):(\d+)").Replace(dataJson, ""); //時間部分不要了
dataJson = dataJson.Replace("\"IsAudit\":true", "\"IsAudit\":\"<span style='color:blue'>已審核</span>\"")
.Replace("\"IsAudit\":false", "\"IsAudit\":\"未審核\"");