Mustache的简介
Mustache是一个轻逻辑的模板引擎,它是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的HTML文档
Mustache的基本用法
首先需要导入mustache.js文件
mustache渲染形式单一
var html=mustache.render(teamp,data)
teamp是一个模板的html,代码如下:
var teamp=
'<select id="subject" name="subject">'+
'{{#list}}'+
'<option>'+
' {{name}}'+
'</option>' +
'{{/list}}'+
'</select>'+
'<select id="course" name="course">'+
'{{#list}}'+
'<option>'+
' {{subject}}'+
'</option>' +
'{{/list}}'+
'</select>'+
'<div class="btn2">111111</div>'
data是一个数据源对象,样例如下:
var data={list:[{name:"计算机",subject:["计算机软件","计算机应用技术","计算机科学与技术"]},{name:"化学工程与技术",subject:["化学工程","化学工艺"]},{name:"电子科学与技术",subject:["物理电子学","电路与系统"]}]};
mustache标签介绍
1){{variable}}变量
var data={"name":{"first":"zhangwei","last":"yuting"},"age":22}
var show={{name.first}} {{name.last}} {{age}}
输出为:zhangwei,yuting,22
2){{{prop}}} 带有HTML的变量
{{prop}}中的html会直接转义
如果属性是加粗的话,显示的时候直接解析带有样式的值
3){{#prop}}{{/prop}}用于遍历参数
4){{^prop}} {{/prop}}用于遍历参数,不同于{{#prop}}{{/prop}}当prop为null,undefined,甚至json数据里没有这个prop字段时会显示
5){{.}}用于枚举数组