doT.js特点，以及好处这里不再赘述，直接上手
下载点这里
来来来，先找点儿成就感，
这里默认页面已经引入了这个js工具了哦
首先模拟一个请求回来的数据，这是截取了一部分的杰森串
// 数据
var time = new Date().getFullYear;
var data = {
'entity':[
{
'img':'图片1',
'name':'商品名称1',
'oldprice':'1780',
'newprice':'',
'sale':'100',
'details':'详情',
'buy':'购买链接1',
'goodsid': '500',
'time': time
},
{
'img':'图片2',
'name':'商品名称2',
'oldprice':'2380',
'newprice':'2180',
'sale':'200',
'details':'详情',
'buy':'购买链接2',
'goodsid': '500',
'time': time
}
],
'array':[
'橘子',
'香蕉',
'苹果',
'大鸭梨'
]
}
欧克，搓搓手，开始了
<!-- 基本输出模板 -->
<script id="basicOutput" type="text/x-dot-template">
<h2>商品：{{= it.name }}</h2>
<div>优惠价格：{{= it.newprice || '暂无优惠' }}</div>
</script>
<!-- 基本输出挂载点 -->
<div id="basicOutputAnchor"></div>
<script>
// 基本输出
var basicOutputTmep = doT.template(document.getElementById('basicOutput').innerText);
document.getElementById('basicOutputAnchor').innerHTML = basicOutputTmep(data.entity[0]);
</script>
好了，下面装X时刻：
首先,想要在页面输出并渲染数据，需要三个部分：定义模板、模板在html中的挂载点、挂载语法部分。
1、先定义输出模板，看好script中的type的值text/x-dot-template，里面就是正经的html标签，模板的语法放在{{}}内，输出内容的语法是{{= }},一定要注意{{}}与=前面的中间不能有空格，等于号后面的内容可以有空格，{{= it.name }}，这是血泪史啊。。。
2、在body区域创建一个盒子，用来承载输出的数据模板没什么好说的，随便扔一个，定义个ID就行
3、孤男寡女，干柴烈火，就差一个火星儿，那就能薪火相传了。所以需要一个火星，就是写在普通script区域的这串不知好歹的代码了。首先使用doT.template()获取到刚刚的模板内容，然后获取到body区域的挂载点，然后把数据传进去basicOutputTmep(data.entity[0])。欧克，给五米伐吴。
*模板中的it是默认接收数据的名称
效果是这样婶儿滴：
for循环
<!-- for循环模板 -->
<script id="forOutput" type="text/x-dot-template">
{{ for (var key in it){ }}
<h2>商品：{{= it[key].name }}</h2>
<div>优惠价格：{{= it[key].newprice || '暂无优惠' }}</div>
{{ } }}
</script>
<!-- for循环挂载点 -->
<div id="forOutputAncher"></div>
<script>
//for循环
var forOutputTemp = doT.template(document.getElementById('forOutput').innerText);
document.getElementById('forOutputAncher').innerHTML = forOutputTemp(data.entity);
</script>
基本语法
{{ for (var key in it){ }}
{{ } }}
没什么好解释的，研究一下传进去的数据，再看看模板，就欧克了。
效果是这样婶儿滴：
数组的for循环
<!-- for数组循环输出模板 -->
<script id="forArrayOutput" type="text/x-dot-template">
<div>今日特价水果:</div>
{{~it:value:index}}
{{= index+1 }}、{{= value }}
{{~}}
</script>
<!-- for数组循环输出挂载点 -->
<div id="forArrayOutputAncher"></div>
<script>
//for数组循环输出
var forArrayOutputTemp = doT.template(document.getElementById('forArrayOutput').innerText);
document.getElementById('forArrayOutputAncher').innerHTML = forArrayOutputTemp(data.array);
</script>
专业的人，做专业的事儿，这个语法确实循环数组很合适，但是在ThinkPHP等框架搭建的环境中，这个语法报错，用上面的
for循环可以解决，
效果是这样婶儿滴:
if判断
<!-- if判断输出模板 -->
<script id="ifOutput" type="text/x-dot-template">
{{ for (var key in it){ }}
<h2>商品：{{= it[key].name }}</h2>
<!-- if判断开始 -->
{{? it[key].newprice == ''}}
<div>商品价格：{{= it[key].oldprice }}</div>
{{?? it[key].oldprice == ''}}
<div>暂无价格</div>
{{??}}
<del>原价：{{= it[key].oldprice }}</del>
<div>优惠价格：{{= it[key].newprice }}</div>
{{?}}
<!-- if判断结束 -->
{{ } }}
</script>
<!-- if判断输出挂载点 -->
<div id="ifOutputAncher"></div>
<script>
//if判断
var forArrayOutputTemp = doT.template(document.getElementById('ifOutput').innerText);
document.getElementById('ifOutputAncher').innerHTML = forArrayOutputTemp(data.entity);
</script>
这里为了效果展示，嵌套了
for循环，if判断的语法
语法 等价于
{{? }} if
{{?? }} else if
{{??}} else
{{?}} if的结束标签
这个
?前面跟{{}}中间也不能有空格，然后就是正经的js中的if判断了
效果是这样婶儿滴：
代码直接输出
先来段杰森串吧
var codeData = {"html":"<div style='background: #f00; height: 50px; line-height: 50px;text-align:center;color:#fff;'>编码输出内容</div>"};
重点来了
<!-- 编码输出模板 -->
<script id="codeOutput" type="text/x-dot-template">
<h3>直接输出代码:</h3>
{{!it.html}}
<h3>编译代码展示:</h3>
{{=it.html}}
</script>
<!-- 编码输出挂载点 -->
<div id="codeOutputAncher"></div>
<script>
//编码输出
var codeOutputTemp = doT.template(document.getElementById('codeOutput').innerText);
document.getElementById('codeOutputAncher').innerHTML = codeOutputTemp(codeData);
</script>
为了展示效果我写了两种样式，直接输出代码的话
{{! }}就欧克
效果是这样婶儿滴：
有点儿要叨叨的：这里只是基础的展示，如果用熟练了，可以解锁各种姿势，各种配合随心所欲，这里就不展示了。总的来说这个东东还是自由度非常高的，可以换着花样儿。。。不说了，再说好像玷污人家女程序媛作者，嘿嘿，反正就是用起来很舒服的。
哦，对了，还可以模板套模板的，自己去研究吧，另外我这里使用的document.getElementById原生的方式获取的元素，当然可以用jQuery等你熟悉的方式
比如用最后一个例子为实例，最后的js可以这样写，当然别忘了引入jQuery
<script>
//编码输出
var codeOutputTemp = doT.template($("#codeOutput").text());
$("#codeOutputAncher").html(codeOutputTemp(codeData));
</script>
