Mustache 使用说明

Posted 2020-12-29 singoocms

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":"未审核"");