doT.js使用教程
官网：http://olado.github.io
下载：https://github.com/olado/doT
语法简介：
{{= }} for interpolation（插值）
{{ }} for evaluation （插入JavaScript代码片段）
{{~ }} for array iteration （数组迭代）
{{? }} for conditionals （条件判断）
{{! }} for interpolation with encoding （插值编码）
{{# }} for compile-time evaluation/includes and partials （使用定义变量）
{{## #}} for compile-time defines （编译模板时，定义变量）
实例代码如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>doT使用</title> <script src="lib/doT.min.js" type="text/javascript"></script> </head> <style> .title{padding: 0 5px;line-height: 30px;font-weight: bolder;background-color: #ccc} .content{border: 1px solid #ccc;padding: 10px} .content .c-title{color: red} </style> <body> <div id="demo1"></div> <div id="demo2"></div> <div id="demo3"></div> <div id="demo4"></div> <div id="demo5"></div> </body> <script id="template1" type="text/x-dot-template"> <div class="title">实例一:{{=it.title}}</div> <div class="content"> {{=it.value}} </div> </script> <script id="template2" type="text/x-dot-template"> <div class="title">实例二:{{=it.title}}</div> <div class="content"> <div class="c-title">1.循环for</div> {{ for(var i = 0,length = it.arr.length;i < length;i++) { }} <span>{{=it.arr[i]}}</span> {{}}} <div class="c-title">2.对象循环for...in</div> {{ for(var key in it.obj) { }} <div>key:{{=key}},value:{{=it.obj[key]}}</div> {{}}} <div class="c-title">3.数组循环for...in</div> {{ for(var key in it.arr) { }} <div>key:{{=key}},value:{{=it.arr[key]}}</div> {{}}} <div class="c-title">4.数组循环~data.array :value:index</div> {{~it.arr:value:index}} <span>{{=value}}</span> {{~}} </div> </script> <script id="template3" type="text/x-dot-template"> <div class="title">实例三:{{=it.title}}</div> <div class="content"> <div class="c-title">1.if</div> {{if(it.value == 2){}} value == 2; {{}else{}} value != 2; {{}}} <div class="c-title">1.? == if,?? == else if,?? == else</div> {{?it.value == 2}} value == 2; {{??}} value != 2; {{?}} </div> </script> <script id="template4" type="text/x-dot-template"> <div class="title">实例四:{{=it.title}}</div> <div class="content"> <div class="c-title">1.uri</div> 编码：{{!it.uri}}<br> 正常：{{=it.uri}} <div class="c-title">2.html</div> 编码：{{!it.html}}<br> 正常：{{=it.html}} </div> </script> <script id="template5" type="text/x-dot-template"> <div class="title">实例五:{{=it.title}}</div> <div class="content"> {{##def.snippet:<div>{{=it.age}}</div>#}} {{#def.part}} {{#def.snippet}} </div> </script> <script> function add(id,data){ var el = document.getElementById(id); return doT.template(el.outerText)(data); } //demo1 var data1 = {title:'赋值',value:'{{= }}提供赋值功能'}; document.getElementById('demo1').innerHTML = add('template1',data1); //demo2 var data2 = {title:'循环',obj:{name:'老王',age:'20',sex:'男'},arr:['A','B','C','D','E','F']}; document.getElementById('demo2').innerHTML = add('template2',data2); //demo3 var data3 = {title:'判断',value:2}; document.getElementById('demo3').innerHTML = add('template3',data3); //demo4 var data4 = {title:'插值编码',uri:"http://bebedo.com/?keywords=Yoga",html:"<span style='color: #05cc17; height: 30px; line-height: 30px;'>html元素</span>"}; document.getElementById('demo4').innerHTML = add('template4',data4); //demo5 var data5 = {title:"编译模板时-定义变量",name:'老张',age:20}; var template5 = document.getElementById('template5').outerText; var defPart = {part:"<div>代码片段获取name：{{=it.name}}?</div>"}; document.getElementById('demo5').innerHTML = doT.template(template5, undefined, defPart)(data5); </script> </html>
运行截图：
