前端模板引擎doT.js的用法

简介

一款简单好用的前端模板引擎

用法

<script type="text/javascript" src="js/doT.min.js"></script>

! 和 = 的用法与区别

<!--用户信息-->
<div class="ibBox yhxx" id="userInfo">
　　<script id="userTemplate" type="text/x-dot-template">
   　　<div class="ibTitle">用户信息</div>
      <dl>
         <dd>
            <label><em>姓名：</em><span>{{!it.name}}</span></label>
            <label><em>工号：</em><span>{{=it.number}}</span></label>
         　　<label><em>机构：</em><span>{{!it.organName}}</span></label>
      　　</dd>
   　　</dl>
　　</script>
</div>
<script>
    var data = {"name":"张三","number":1001,"organName":""},//要渲染的数据
    var userTemplate = doT.template($("#userTemplate").text());//生成模板
    $("#userInfo").html(userTemplate(data));//数据渲染
</script>

两者都是赋值，区别于 ! 无法渲染数值为0的数据，而 = 可以，不过 ! 可以渲染带编码的数据，比如

var data= {"url":"http://jq22.com/?keywords=Yoga","html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};

~ 的用法

{{~it.list:item:index}}
<tr data-id="{{!item.id}}">
    <td>{{!item.title}}</td>
    <td>{{!item.publishTime}} </td>
</tr>
{{~}}

用于循环数组

? 的用法

<span class="{{? it.type==1}}w1{{?? it.type==2}}w2{{??}}w3{{?}}">
　　{{?it.status==0}}未发布{{??}}已发布{{?}}
</span>

条件判断,相当于if....else if......

# 的用法

<div class="ibBox yhxx" id="userInfo">
　　<script id="userTemplate" type="text/x-dot-template">
　　　　<!-- 定义模板tem1 -->
　　　　{{## def.tem1:
　　　　　　<label><em>姓名：</em><span>{{!it.name}}</span></label>
　　　　#}}
   　　<div class="ibTitle">用户信息</div>
      <dl>
         <dd>
　　　　　　　　<!-- 引用模板tem1 -->
            {{#def.tem1}}
            <label><em>工号：</em><span>{{=it.number}}</span></label>
         　　<label><em>机构：</em><span>{{!it.organName}}</span></label>
      　　</dd>
   　　</dl>
　　</script>
</div>

格式：定义模板{{##def.name:******#}} name为模板名称，*****为模板内容，引用模板{{#def.name}} name为模板名称

for 原生循环的使用

{{ for(var i=0;i<it.length;i++){ }}
　　{{ if(it[i].bz == 1){ }}
    　 {{#def.tem1}}
   {{ }else{ }}
   　　{{#def.tem2}}
　　{{ } }}
{{ } }}