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=" 82px;height: 88px;">
                            {{?? it.color == '2'}}
                            <img src="../image/cbg_map_blue.png" style=" 82px;height: 88px;">
                            {{?? it.color == '3'}}
                            <img src="../image/cbg_map_orange.png" style=" 82px;height: 88px;">
                            {{?? it.color == '4'}}
                            <img src="../image/cbg_map_purple.png" style=" 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=" 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=" 82px;height: 88px;">
                            {{?? it.color == '2'}}
                            <img src="../image/cbg_map_blue.png" style=" 82px;height: 88px;">
                            {{?? it.color == '3'}}
                            <img src="../image/cbg_map_orange.png" style=" 82px;height: 88px;">
                            {{?? it.color == '4'}}
                            <img src="../image/cbg_map_purple.png" style=" 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=" 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=" 82px;height: 88px;">
                    {{?? it.color == '2'}}
                    <img src="../image/cbg_map_blue.png" style=" 82px;height: 88px;">
                    {{?? it.color == '3'}}
                    <img src="../image/cbg_map_orange.png" style=" 82px;height: 88px;">
                    {{?? it.color == '4'}}
                    <img src="../image/cbg_map_purple.png" style=" 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);
                }
            });
        }

方法论:能够深入理解，才能够灵活运用。
能够把表象的，抽离出来成为简单的模型，也是一种本领。抽象与具体相结合。本篇就是比较具体，但是别人看起来会不会很吃力呢。如果抽象一下，图解一下，估计会更好理解。