doT.js灵活运用之嵌入使用
基础的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 <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;">
<!--<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);
}
});
}
方法论:能够深入理解，才能够灵活运用。
能够把表象的，抽离出来成为简单的模型，也是一种本领。抽象与具体相结合。本篇就是比较具体，但是别人看起来会不会很吃力呢。如果抽象一下，图解一下，估计会更好理解。
