第一步:引入doT.min.js文件
<script type="text/javascript" src="../script/doT.min.js"></script>
第二步:利用doT.js模板在html中
- <script id="act-template" type="text/x-dot-template">
- {{ for(var i=0; i < it.length; i++) { }}
- <div class="hot_card" οnclick="onclickItem('{{=it[i].url}}','{{=it[i].title}}');">
- <img src="{{=it[i].picUrl}}" alt="" class="hot_cover">
- <div class="cardl" tapmode="btn_click">
- <div class="videotitle">{{=it[i].title}}</div>
- <div class="videoLen"><!--<img src="" alt="" class="rightarrow">-->{{=it[i].description}} <span class="vd"></span><!--{{=it[i].ct}}--></div>
- </div>
- <!--<div class="cardr" tapmode="sharehover"></div>-->
- </div>
- {{ } }}
- </script>
- <div id="act-content"></div>
第三步:把数据接口输出到模板数据接口
- api.ajax({
- url: 'http://1.myp?page=1
- method: 'get',
- cache: true,
- timeout: 20
- }, function (ret, err) {
- if (ret) {
- var tpl = $api.byId('act-template').text;
- //alert(ret[0].title);
- var tempFn = doT.template(tpl);
- //alert(ret.showapi_res_body.contentlist.length)
- content.innerHTML += tempFn(ret.newslist);
- api.parseTapmode();
- } else {
- api.toast({msg: err.msg, location: 'middle'})
- }
- });