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 &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);

                }

            });

        }

方法论:能够深入理解，才能够灵活运用。

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

doT.js灵活运用之嵌入使用的更多相关文章

doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
doT.js
最近用到的数据模板引擎有很多,今天讲的doT.js也是其中一种. doT.js的特点是体积小,速度快,并且不依赖其他插件. 官网下载:http://olado.github.io 下面是用法: 模板引 ...
doT.js学习
doT.js特点是快,小,无依赖其他插件.但是一般和jquery一起使用官网:http://olado.github.io 使用方法:{{= }} for interpolation{{ }} fo ...
doT.js详细介绍
doT.js详细介绍 doT.js特点是快,小,无依赖其他插件. 官网:http://olado.github.iodoT.js详细使用介绍使用方法:{{= }} for interpolati ...
doT.js源码解读
doT.js非常的简洁.全部代码也就200行不到.它的基本思路就是通过强大的正则表达式,把模块转变成可执行的函数,动态生成html字符串.核心new Function(c.varname, str); ...
模板引擎doT.js介绍及如何判断对象为空、如何嵌套循环···
doT.js 灵感来源于搜寻基于 V8 和 Node.js ,强调性能,最快速最简洁的 JavaScript 模板函数引入 javascript 文件: <script type=" ...
dot.js教程文档api
dot.js是一个短小精悍的js模板引擎,压缩版仅有4K大小,最近使用dot的时候整理出这个dot.js教程文档,其实称不上什么教程,只是对dot.js的介绍和实例,希望能帮助到一部分需要的人. 使用 ...
doT.js 模板引擎的使用
dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...
doT js模板入门
doT.js github地址: doT.js 官方站点实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

洛谷 P2747 [USACO5.4]周游加拿大Canada Tour
P2747 [USACO5.4]周游加拿大Canada Tour 题目描述你赢得了一场航空公司举办的比赛,奖品是一张加拿大环游机票.旅行在这家航空公司开放的最西边的城市开始,然后一直自西向东旅行,直 ...
[ML] Daily Portfolio Statistics
Let's you have $10000, and you inverst 4 stocks. ['SPY', 'IBM', 'XOM', 'GOOG']. The allocation is [0 ...
广东省知名P2P平台资料
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYXNrYmFpNjY2ODg4/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
转--配置linux下dircolors,ls命令和mac下iTerm2的颜色,让终端(iTerm2或Terminal)也色彩缤纷
http://blog.bbkanba.com/%E9%85%8D%E7%BD%AElinux%E4%B8%8Bdircolorsls%E5%91%BD%E4%BB%A4%E5%92%8Cmac%E4 ...
[Perl系列—] 2. Perl 中的引用使用方法
Perl 中的引用,为什么要使用引用? 对于熟悉C语言的开发人员来说, 指针这个概念一定不陌生. Perl 的引用就是指针,能够指向变量.数组.哈希表甚至子程序. Perl5中的两种Perl引用类型为 ...
一天一个算法：求Sn=a+aa+aaa+…+aa…a之和
/* 求Sn=a+aa+aaa+…+aa…a之值,其中a是一个数字. 例如:2+22+222+…+22222(此时n=5),n由键盘输入.*/ void Function3() { int a,n,s ...
POJ 2478 线性递推欧拉函数
题意: 求sigma phi(n) 思路: 线性递推欧拉函数 (维护前缀和) //By SiriusRen #include <cstdio> using namespace std; # ...
如何设置eclipse代码自动提示功能
如何设置eclipse代码自动提示功能我们在刚安装完使用eclipse进行开发时,会发现没有代码提示会非常的不方便,下面小编将告诉你如何进行代码自动提示的设置. 工具/原料 eclipse 电脑 ...
Hadoop框架基础（五）
** Hadoop框架基础(五) 已经部署了Hadoop的完全分布式集群,我们知道NameNode节点的正常运行对于整个HDFS系统来说非常重要,如果NameNode宕掉了,那么整个HDFS就要整段垮 ...
前端验证银行卡（Luhn校验算法）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

doT.js灵活运用之嵌入使用

doT.js灵活运用之嵌入使用的更多相关文章

随机推荐

热门专题