doT.js模板用法
阿新 • • 發佈:2020-08-28
前提:引入doT.min.js:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/doT.min.js"></script>
(1)、基本用法{{=it.attr}}
<div id="testid"></div>
<script type="text/x-dot-template" id="useType0">//模板存放區域 修改type型別,以免會被解析成js <p> <span>姓名:{{=it.name}}</span> </p> </script>
<script>
var testjson={
"name":"張三"
},
tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
document.getElementById("testid").innerHTML=tmpltxt(testjson);//資料渲染
</script>
(2)、迴圈陣列用法{{~}}
<div id="testid"></div>
<script type="text/x-dot-template" id="useType0">
<ul>
{{~it:value:index}}
<li>
<span>姓名:{{=value.name}}</span>
</li>
{{~}}
</ul>
</script>
<script> var testjson=[ {"name":"張三","age":31,"fun":"吃東西"} ], tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法 document.getElementById("testid").innerHTML=tmpltxt(testjson);//資料渲染 </script>
(3)、條件判斷{{?}}{{??}}, 就是(if else if)
<div id="testid"></div>
<script type="text/x-dot-template" id="useType0">
<ul>
{{~it:value:index}}
{{?!value.age}}
<li>
<span>姓名:{{=value.name}}</span>
<span>年齡:年齡資料缺失</span>
<span>愛好:{{=value.fun}}</span>
</li>
{{??!value.fun}}
<li>
<span>姓名:{{=value.name}}</span>
<span>年齡:{{=value.age}}</span>
<span>愛好:無趣的人</span>
</li>
{{??}}
<li>
<span>姓名:{{=value.name}}</span>
<span>年齡:{{=value.age}}</span>
<span>愛好:{{=value.fun}}</span>
</li>
{{?}}
{{~}}
</ul>
</script>
<script>
var testjson=[
{"name":"張三","age":31,"fun":"吃東西"},
{"name":"李四","fun":"上網"},
{"name":"王五","age":70}
],
tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
document.getElementById("testid").innerHTML=tmpltxt(testjson);//資料渲染
</script>
(4)、編碼渲染{{!}}
主要是為了防止程式碼注入以保障安全,如傳入一個HTML片段或js片段,它會以字串的形式渲染
<div id="testid"></div>
<script type="text/x-dot-template" id="useType0">
<ul>
{{~it:value:index}}
{{?value.bz}}
<li>
<span>姓名:{{=value.name}}</span>
<span>年齡:{{=value.age}}</span>
<span>愛好:{{!value.html}}</span>
</li>
{{??}}
<li>
<span>姓名:{{=value.name}}</span>
<span>年齡:{{=value.age}}</span>
<span>愛好:{{=value.html}}</span>
</li>
{{?}}
{{~}}
</ul>
</script>
<script>
var testjson=[
{"name":"張三","age":31,"html":"<b>呵呵</b>","bz":true},
{"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
],
tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
document.getElementById("testid").innerHTML=tmpltxt(testjson);//資料渲染
</script>
(5)、支援共用模組定義{{##def.}}定義,{{#def.}}引用模組
<div id="testid"></div>
<script type="text/x-dot-template" id="useType0">
<!-- 模組定義0 -->
{{##def.togeter0:
<li><span>姓名:{{=value.name}}</span><span>年齡:{{=value.age}}</span><span>愛好:{{!value.html}}</span></li>
#}}
<!-- 模組定義1 -->
{{##def.togeter1:
<li><span>姓名:{{=value.name}}</span><span>年齡:{{=value.age}}</span><span>愛好:{{=value.html}}</span></li>
#}}
<ul>
{{~it:value:index}}
{{?value.bz}}
<!-- 引用模組0 -->
{{#def.togeter0}}
{{??}}
<!-- 引用模組1 -->
{{#def.togeter1}}
{{?}}
{{~}}
</ul>
</script>
<script>
var testjson=[
{"name":"張三","age":31,"html":"<b>呵呵</b>","bz":true},
{"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
],
tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
document.getElementById("testid").innerHTML=tmpltxt(testjson);//資料渲染
</script>
注:模組定義也可以一個json資料定義,再在生成模板函式函式的時候傳入即可,示例如下,其中tmpljson就是在外面以json定義的模組:
<div id="testid"></div>
<script type="text/x-dot-template" id="useType0">
<!-- 模組定義0 -->
{{##def.togeter0:
<li><span>姓名:{{=value.name}}</span><span>年齡:{{=value.age}}</span><span>愛好:{{!value.html}}</span></li>
#}}
<!-- 模組定義1 -->
{{##def.togeter1:
<li><span>姓名:{{=value.name}}</span><span>年齡:{{=value.age}}</span><span>愛好:{{=value.html}}</span></li>
#}}
<ul>
{{~it:value:index}}
{{?value.bz===true}}
<!-- 引用模組0 -->
{{#def.togeter0}}
{{??value.bz===false}}
<!-- 引用模組1 -->
{{#def.togeter1}}
{{??}}
<!-- 引用傳入的模組 -->
{{#def.testmode}}
{{?}}
{{~}}
</ul>
</script>
<script>
var testjson=[
{"name":"張三","age":31,"html":"<b>呵呵</b>","bz":true},
{"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false},
{"name":"李四","age":24,"html":"<b>哈哈</b>"}
],
tmpljson={"testmode":"<li><span>姓名:{{=value.name}}</span><span>年齡:{{=value.age}}</span></li>"}//以json格式定義模組
tmpltxt=doT.template(document.getElementById("useType0").innerHTML,undefined,tmpljson);//生成模板方法,傳入了json定義的模組
document.getElementById("testid").innerHTML=tmpltxt(testjson);//資料渲染
</script>
(6)、用原生的迴圈,條件渲染
<div id="testid"></div>
<script type="text/x-dot-template" id="useType0">
<!-- 模組定義0 -->
{{##def.togeter0:
<li><span>姓名:{{=itz.name}}</span><span>年齡:{{=itz.age}}</span><span>愛好:{{!itz.html}}</span></li>
#}}
<!-- 模組定義1 -->
{{##def.togeter1:
<li><span>姓名:{{=itz.name}}</span><span>年齡:{{=itz.age}}</span><span>愛好:{{=itz.html}}</span></li>
#}}
<ul>
{{ for(var i=0;i<it.length;i++){ }}
{{ var itz=it[i]; }}
{{ if(itz.bz){ }}
<!-- 引用模組0 -->
{{#def.togeter0}}
{{ }else{ }}
<!-- 引用模組1 -->
{{#def.togeter1}}
{{ } }}
{{ } }}
</ul>
</script>
<script>
var testjson=[
{"name":"張三","age":31,"html":"<b>呵呵</b>","bz":true},
{"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
],
tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
document.getElementById("testid").innerHTML=tmpltxt(testjson);//資料渲染
</script>
(7)、巢狀迴圈(很常用)
<div id="category-goods"></div>
<script id="category-goods-tmpl" type="text/x-dot-template">
{{~it:item:index}}
<div class="rxsp">
<div class="aui-pull-left">
<h3> {{= item.name }} 【索引: {{= index }} 】</h3>
</div>
<a class="aui-pull-right ">
檢視更多
<span class="aui-iconfont aui-icon-right"></span>
</a>
</div>
<div class="aui-list-item-inner">
<div class="aui-row aui-row-padded">
{{~it[index].goods:item:j}}
<div class="aui-col-xs-6">
<img src="{{= item.logoimg }}" onclick="">
<p class="tit">{{= item.name }} </p>
<div class="aui-info" style="padding-top:0">
<div class="aui-info-item">
<span class="red">¥{{= item.price }}
</div>
</div>
</div>
{{~}}
</div>
</div>
{{~}}
</script>
<script type="text/javascript">
var goods_list = {
"list": [{
"id": "1",
"name": "衣服",
"goods": [{
"goods_id": "1",
"name": "衣服1",
"price": "100",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
},
{
"goods_id": "2",
"name": "衣服2",
"price": "200",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
}
]
},
{
"id": "2",
"name": "鞋子",
"goods": [{
"goods_id": "3",
"name": "鞋子1",
"price": "100",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
},
{
"goods_id": "4",
"name": "鞋子2",
"price": "200",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
}
]
}
]
};
var evalText = doT.template($("#category-goods-tmpl").html());
$("#category-goods").html(evalText(goods_list.list));
</script>