###doT是一个小巧快速无依赖的JS模板框架:
- 无依赖, 120 行代码
- 极其快速
- 自定义定界符 (custom delimiters)
- 运行时求值 (runtime evaluation)
- 运行时插值 (runtime interpolation)
- 编译时求值 (compile-time evaluation)
- 支持局部模板
- 支持条件语句
- Github源码地址
###DoT定界符列表:
- {{ }} 用于求值(evaluation)
- {{= }} 用于插值(interpolation)
- {{! }} 用于编码求值
- {{# }} 用于编译时求值/引入和局部模板
- {{## #}} 用于编译时定义
- {{? }} 条件语句
- {{~ }} 数组迭代
###Demo:
####首先需要引入 javascript 文件:
<script type="text/javascript" src="doT.js"></script>
插值/求值模板
模板数据必须使用 it 作为引用
<script id="pagetmpl" type="text/template">
<h2>Here is the page using a header template</h2>
//{{=}}插入值
{{=it.name}}
//{{#}}编译时求值
{{#def.header}}
</script>
<script type="text/javascript">
//模拟数据
var data = {
title: "My title",
name: "My name"
};
// template()是dot用来编译模板的方法
var pagefn = doT.template(document.getElementById('script模板ID').html(), data);
// content是自定义模板ID
document.getElementById('content').innerHTML = pagefn;
</script>
<body>
<div id="content"></div>
</body>
数组迭代模板
<script type="text/template" id='girlList'>
{{~it:value}}
<li class="item" onclick="console.log('我是:{{=value.nick}}')">
![]({{=value.img_url}})
<p class="name">{{=value.nick}}</p>
<p class="info">{{=value.age}}岁 {{=value.username}}</p>
</li>
{{~}}
</script>
// ret是服务器返回JSON数据
// template()是dot用来编译模板的方法 girlList是自定义模板ID
var resultText = doT.template(girlList.innerHTML)(ret);
$('ul').append($api.dom('#dataList'), resultText);
####条件模板
{{?x==y}}
<div>如果x==y执行这里</div>
{{??}}
<div>如果x==y不成立 执行这里</div>
{{?}}
发现一个小东西,使用拼接字符串方式的时候:
var resultStr = "";
for(var i = 0;i < ret.length; i++){
resultStr += '<li class="item" onclick="console.log(ret[i])">';
resultStr += '![]('+ ret[i].img_url+')'
resultStr += '<p class="name">'+ ret[i].nick+'</p>'
resultStr += '<p class="info">'+ ret[i].age+'岁 '+ ret[i].username+'</p>'
resultStr += '</li>'
}
这里的console.log(ret[i])没法执行,因为浏览器编译时onclick方法并不在这个for循环下,ret是undefined,而使用doT模板没有这个问题,可以比较方便的操作数据,
仅供参考,欢迎指正