Front-end template engine doT.js usage

Brief introduction

An easy to use front-end template engine

usage

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

! = And usage differs

<!--用户信息-->
<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 " : " Joe Smith " , " Number " : 1001 , " organName " : "" }, // to be rendered data var userTemplate = doT.template ($ ( " #userTemplate " ) .text ()); // generating a template 
    $ ( " #userInfo " ) .html (userTemplate (data)); // data rendering 
</ script>
    
    

Both are assigned, different! Not render the data value 0, and = Yes, but! Coded data can be rendered, such as

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

- Usage

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

For loop through the array

? Usage

<span class = " {{?}}. 1 it.type W1 == {{2}} ?? w2 of it.type == {{{{W3} ??}?}} " > 
　　{{ ? it.status == 0 }} {{unpublished ??}} published {{? }}
 </ span>

Analyzing conditions, equivalent if .... else if ......

# Usage

<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>

Format: Defines the template {{## def.name: ****** #}} name for the template name, ***** template content, reference template {{# def.name}} name for the template name

Use for the native loop

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