js动态绑定

第一步：引入doT.min.js文件

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

第二步：利用doT.js模板在html中

[javascript] view plain copy

 

1. <script id="act-template" type="text/x-dot-template">  
2.             {{ for(var i=0; i < it.length; i++) { }}  
3.                     <div class="hot_card" onclick="onclickItem('{{=it[i].url}}','{{=it[i].title}}');">      
4.                         <img src="{{=it[i].picUrl}}" alt="" class="hot_cover">      
5.                         <div class="cardl"   tapmode="btn_click">   
6.                             <div class="videotitle">{{=it[i].title}}</div>    
7.                             <div class="videoLen"><!--<img src="" alt="" class="rightarrow">-->{{=it[i].description}} <span class="vd"></span><!--{{=it[i].ct}}--></div>    
8.                         </div>      
9.                         <!--<div class="cardr" tapmode="sharehover"></div>-->   
10.                     </div>  
11.             {{ } }}  
12.         </script>  
13.         <div id="act-content"></div>  

第三步：把数据接口输出到模板数据接口

[javascript] view plain copy

 

1. api.ajax({  
2.             url: 'http://1.myp?page=1  
3.             method: 'get',  
4.             cache: true,  
5.             timeout: 20  
6.         }, function (ret, err) {  
7.             if (ret) {  
8.                   
9.                 var tpl = $api.byId('act-template').text;  
10.                 //alert(ret[0].title);  
11.                 var tempFn = doT.template(tpl);  
12.                 //alert(ret.showapi_res_body.contentlist.length)  
13.                 content.innerHTML += tempFn(ret.newslist);  
14.                 api.parseTapmode();  
15.             } else {  
16.                 api.toast({msg: err.msg, location: 'middle'})  
17.             }  
18.   
19.               
20.         });