基礎的base_info_area

<div id="base_info_area"></div> <script type="text/html/x-dot-template" id="base_info_tmpl"><div class="aui-row"><div class="aui-col-xs-12"><div class="bz "><div class="ydgm"><img src="../image/cbg_rwxq.png"></div><div class="aui-row"><div class="tt"><div class="aui-col-xs-3">{{? it.color == '1'}}<img src="../image/cbg_map_green.png" style="width: 82px;height: 88px;">{{?? it.color == '2'}}<img src="../image/cbg_map_blue.png" style="width: 82px;height: 88px;">{{?? it.color == '3'}}<img src="../image/cbg_map_orange.png" style="width: 82px;height: 88px;">{{?? it.color == '4'}}<img src="../image/cbg_map_purple.png" style="width: 82px;height: 88px;">{{?}}</div><div class="aui-col-xs-9" style="text-align: center;padding: 0 0.5rem;"><h3>進度情況</h3><p class="aui-font-size-20">DS &nbsp;&nbsp; <span class="sz" id="completeNum">{{= it.MapCompleteNum}}</span>/<span id="unlockNum">{{= it.MapUnlockNum}}</span></p><p class="by">{{= it.MapUnlockNum}}/{{= it.MapTotalNum}}</p></div></div><div class="xian"></div><div class="js"><div class="aui-col-xs-3" style="text-align: center;">&nbsp;<!--<p>倒計時</p>--><!--<p style="color:#e8342f; font-weight: bold;">00:59:57</p>--></div><div class="aui-col-xs-6" style="text-align: center;"><h3 style="color:#a5e24d;padding-top:10px;">{{? it.MissionState == '10'}} <!-- 進行中 -->進行中{{?? it.MissionState == '20'}} <!-- 審核中 -->審核中{{?? it.MissionState == '90'}} <!-- 審核通過 -->審核通過{{?? it.MissionState == '80'}} <!-- 審核未通過 -->審核未通過{{?? it.MissionState == '70'}} <!-- 審核未通過 -->任務取消{{?? it.MissionState == '100'}} <!-- 已完成 -->已完成{{?}}</h3></div><div class="aui-col-xs-3 rig"><img src="../image/cbg_sxan.png" onclick="refreshTask('{{= it.color}}');"></div></div> </div>{{? it.MissionState == 0 || it.MissionState == 70 || it.MissionState == 80 || it.MissionState == 100}}<div class="aui-row" id="noTask"><div class="tt" style="height: 250px;vertical-align: middle;"><div class="aui-col-xs-12" style="text-align: center;"><h1 style="color:#f3cdc6;">任務情況</h1>{{? it.MissionState == 0}}<p>尚未接受任務</p><p>點擊刷新任務接受新任務吧~</p>{{?? it.MissionState == 70}}<p>任務已取消</p><p>{{? it.Memo != null}}備注:{{= it.Memo}}{{?}}</p><p>點擊刷新任務接受新任務吧~</p>{{?? it.MissionState == 80}}<p>任務未審核通過</p><p>{{? it.Memo != null}}備注:{{= it.Memo}}{{?}}</p><p>點擊刷新任務接受新任務吧~</p>{{?? it.MissionState == 100}}<p>任務已完成</p><p>點擊刷新任務接受新任務吧~</p>{{?}}</div></div></div><div id="refreshTaskData"></div>{{??}}<div class="aui-row"><div class="tt"><div class="rwt"><img style="width: 100%;" src="../image/cbg_an.png"> <div class="rwms">{{? it.MissionTypeId == '1'}}應用活動任務{{?? it.MissionTypeId == '2'}}商城消費任務{{?? it.MissionTypeId == '3'}}線下活動任務{{?}}</div><div class="rwjl">任務獎勵￥{{= it.PrizeAmount}}</div></div><div class="aui-col-xs-3">{{? it.color == '1'}}<img src="../image/cbg_map_green.png" style="width: 82px;height: 88px;">{{?? it.color == '2'}}<img src="../image/cbg_map_blue.png" style="width: 82px;height: 88px;">{{?? it.color == '3'}}<img src="../image/cbg_map_orange.png" style="width: 82px;height: 88px;">{{?? it.color == '4'}}<img src="../image/cbg_map_purple.png" style="width: 82px;height: 88px;">{{?}}</div><div class="aui-col-xs-9" style="padding-left:1rem;"><h4>{{= it.MissionData.Title}}</h4><p>{{= it.MissionData.Content}}</p></div><div class="but"></div></div></div><div class="foot">{{? it.MissionState == '10'}} <!-- 進行中 --><div onclick="submitTask('{{= it.MissionId}}');"><img src="../image/cbg_ljqw.png"><h1>提交任務</h1></div>{{?? it.MissionState == '20'}} <!-- 審核中 -->{{?? it.MissionState == '90'}} <!-- 審核通過 --><div onclick="getAward('{{= it.MissionId}}');"><img src="../image/cbg_ljqw.png"><h1>領取獎勵</h1></div>{{?? it.MissionState == '70'}} <!-- 任務取消 -->{{?? it.MissionState == '80'}} <!-- 審核未通過 -->{{?? it.MissionState == '100'}} <!-- 已完成 --><div><img src="../image/cbg_ljqw.png"><h1>已完成</h1></div>{{?}}</div>{{?}}</div></div></div></script>

其中的<div id="refreshTaskData"></div>
可以繼續使用模板數據

<script id="refreshTaskTmpl" type="text/html/x-dot-template"><div class="aui-row"><div class="tt"><div class="rwt"><img style="width: 100%;" src="../image/cbg_an.png"><div class="rwms" id="MissionType">{{? it.MissionTypeId == '1'}}應用活動任務{{?? it.MissionTypeId == '2'}}商城消費任務{{?? it.MissionTypeId == '3'}}線下活動任務{{?}}</div><div class="rwjl">任務獎勵￥<span id="PrizeAmount">{{= it.PrizeAmount}}</span></div></div><div class="aui-col-xs-3">{{? it.color == '1'}}<img src="../image/cbg_map_green.png" style="width: 82px;height: 88px;">{{?? it.color == '2'}}<img src="../image/cbg_map_blue.png" style="width: 82px;height: 88px;">{{?? it.color == '3'}}<img src="../image/cbg_map_orange.png" style="width: 82px;height: 88px;">{{?? it.color == '4'}}<img src="../image/cbg_map_purple.png" style="width: 82px;height: 88px;">{{?}}</div><div class="aui-col-xs-9" style="padding-left:1rem;"><h4 id="MissionTitle">{{= it.MissionData.Title}}</h4><p id="MissionContent">{{= it.MissionData.Content}}</p></div><div class="but"></div></div></div><div class="foot"><div onclick="confirmTask('{{= it.color}}','{{= it.MissionId}}');"><img src="../image/cbg_ljqw.png" ><h1>確認任務</h1></div></div></script>

執行腳本

apiready = function () {api.addEventListener({name: 'game_data_reload'}, function(ret, err) {if (ret) {location.reload(); // 刷新頁面}});var header = $api.byId('header');$api.fixStatusBar(header);var color = api.pageParam.color;api.showProgress({title: '加載中...',modal: false});// 獲取任務數據var user = $api.getStorage('user');api.ajax({url: BASE_REQUEST_URL + '/Customer/TreasureBagOpen',method: 'post',data: {values: {customerId: user.customer_id,memberId:user.member_id,color:color}}}, function(json, err) {api.hideProgress();if (json && json.result) {json.color = color;// 處理基本數據var interText = doT.template($("#base_info_tmpl").text());$("#base_info_area").html(interText(json));}});} // 刷新任務function refreshTask(color) {// 如果完成的大于等于解鎖的，禁止刷新任務var completeNum = parseInt($("#completeNum").html());var unlockNum = parseInt($("#unlockNum").html());if (completeNum >= unlockNum) {toast("當前顏色寶箱解鎖的數量已用完~");return false;}var user = $api.getStorage('user');api.ajax({url: BASE_REQUEST_URL + '/Customer/MissionRefresh',method: 'post',data: {values: {customerId: user.customer_id,memberId:user.member_id,color:color}}}, function(json, err) {// 處理刷新內容if (json.result == true) {$("#noTask").hide();var auitoast = new auiToast();auitoast.success({title:json.msg,duration:2000});// 處理動作json.color = color;// 處理基本數據var interText = doT.template($("#refreshTaskTmpl").text());$("#refreshTaskData").html(interText(json));} else {toast(json.msg);}});}

方法論:能夠深入理解，才能夠靈活運用。
能夠把表象的，抽離出來成為簡單的模型，也是一種本領。抽象與具體相結合。本篇就是比較具體，但是別人看起來會不會很吃力呢。如果抽象一下，圖解一下，估計會更好理解。

轉載于:https://www.cnblogs.com/jiqing9006/p/6283401.html

總結

以上是生活随笔為你收集整理的doT.js灵活运用之嵌入使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。