# DoT模板引擎使用 [TOC] ### 1.先引用 doT.min.js文件 ~~~ <script type="text/javascript" src="../../script/doT.min.js"></script> ~~~ ### 2.script代碼部分案例 > 將html文件在script中輸出 ~~~ <script type="text/x-dot-template" id="MgT"> {{ for (var i = 0; i < it.length; i++){ }} {{ if( it[i].smete ){ }} <li class="aui-list-view-cell aui-img" tapmode onclick="fnOpenArticle({{=it[i].tid}},{{=it[i].object_id}})"> <img class="aui-img-object aui-pull-right" src="http://www.sytest.com.cn/data/upload/{{=it[i].smete}}"> <div class="aui-img-body"> <h3>{{=it[i].post_title}}</h3> <div class='con'> <span class="aui-pull-left">{{=it[i].post_modified}}</span> <span class="aui-pull-right ">&nbsp;{{=it[i].post_like}}瀏覽</span> <span class="aui-pull-right ">{{=it[i].post_like}} 點贊 </span> </div> </div> </li> {{ }else{ }} <li class="aui-list-view-cell aui-img" tapmode onclick="fnOpenArticle({{=it[i].tid}},{{=it[i].object_id}})"> <div class="aui-img-body"> <h3>{{=it[i].post_title}}</h3> <div class='con'> <span class="aui-pull-left">{{=it[i].post_modified}}</span> <span class="aui-pull-right ">&nbsp;{{=it[i].post_like}}瀏覽</span> <span class="aui-pull-right ">{{=it[i].post_hits}} 點贊 </span> </div> </div> </li> {{ } }} {{ }; }} </script> ~~~ > 將得到的json數組用方法封裝 插入到需要添加的html位置中 ~~~ function fnMlist_con(data_) { var apendText = $api.byId('MgT').text; var fnapendText = doT.template(apendText); var html = fnapendText(data_); var list = $api.dom('#megList'); $api.append(list, html); } ~~~ > 在ajax返回數據中調用封裝好的方法將數據插入到html中 ~~~ api.ajax({ url: 'requestPath', method: 'post', data: { values: { valueName: 'value' }, files: { fileName: 'filePath' } } }, function(ret, err) { if (ret) { fnMlist_con(ret); } else { alert(JSON.stringify(err)); } }); ~~~ ### 3.script代碼部分案例(條件循環，添加參數循環) ~~~ <script type="text/x-dot-template" id="TwonavT"> {{var ids=0;}} {{ for (var i = 0; i < it.length; i++){ }} {{? i==0}} <dl style="margin-top:46px;padding-bottom:50px;display:block;" data-id="ids" > {{ for (var k = 0; k < it[i].category_one.length; k++){ }} <dt><a>{{=it[i].category_one[k].mobile_name}}</a></dt> <dd> <div class="fenimg"> {{ for (var c = 0; c <it[i].category_one[k].category_two.length; c++){ }} <div class="fen"> <a href="../html/goodsList.html?id={{=it[i].category_one[k].category_two[c].id}}">{{=it[i].category_one[k].category_two[c].mobile_name}}</a> </div> {{ } }} </div> </dd> {{ } }} </dl> {{ids++;}} {{??}} <dl style="margin-top:46px;padding-bottom:50px;display:none;" data-id="ids" > {{ for (var k = 0; k < it[i].category_one.length; k++){ }} <dt><a>{{=it[i].category_one[k].mobile_name}}</a></dt> <dd> <div class="fenimg"> {{ for (var c = 0; c <it[i].category_one[k].category_two.length; c++){ }} <div class="fen"> <a href="../html/goodsList.html?id={{=it[i].category_one[k].category_two[c].id}}">{{=it[i].category_one[k].category_two[c].mobile_name}}</a> </div> {{ } }} </div> </dd> {{ } }} </dl> {{ids++;}} {{?}} {{ } }} </script> ~~~ > {{var ids=0;}}添加自定義js代碼 {{? }} if {{??}}else {{?}}結尾 在doT中輸出js變量 可以 例如js 變量domainName ~~~ <img src="{{=domainName}}/data/upload/{{=it.smeta}}" /> ~~~