mustache 模板，用于构造html页面内容。在实际工作中，当同一个模板中想要调用不同的函数来渲染画面，如果想要一些函数定义的话，就应该升级用vue了

Mustache 的模板语法很简单

{{data}}
{{#data}} {{/data}}
{{^data}} {{/data}}
{{.}}
{{<partials}}
{{{data}}}
{{!comments}}

举个例子

html代码

<script id="deptListTemplate" type="x-tmpl-mustache">
<ol class="dd-list">
{{#deptList}}
<liid="dept_{{id}}" href="javascript:void(0)" data-id="{{id}}">
<div style="cursor:pointer;">
{{name}}
<span>
 <a ref="#" data-id="{{id}}" >
 <i class="ace-icon fa fa-pencil bigger-100"></i>
 </a>
 
 <a class="red dept-delete" href="#" data-id="{{id}}" data-name="{{name}}">
 <i class="ace-icon fa fa-trash-o bigger-100"></i>
 </a>
 </span>
</div>
</li>
{{/deptList}}
</ol>
</script>

js代码

var result = jingjifenxires;
console.log(result);
$(function() {
var deptList;
var deptMap = {};
var userMap = {};
loadDeptTree();
function loadDeptTree() {
if(result) {
deptList = result.data;
var rendered = Mustache.render(deptListTemplate, {
deptList: result.data
});
$("#deptList").html(rendered);
recursiveRenderDept(result.data);
//	bindDeptClick();
} else {
showMessage("加载部门列表", result.msg, false);
}
}
// 递归渲染部门树
function recursiveRenderDept(deptList) {
if(deptList && deptList.length > 0) {
$(deptList).each(function(i, dept) {
deptMap[dept.id] = dept;
if(dept.deptList.length > 0) {
var rendered = Mustache.render(deptListTemplate, {
deptList: dept.deptList
});
$("#dept_" + dept.id).append(rendered);
recursiveRenderDept(dept.deptList);
}
})
}
}
})