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& ...

随机推荐

对同层数据进行处理，做成树状图形式的数据结构，并符合elementui中的tree结构
//通过子级的pid找到父级对应的id,制作树状图 var data = [ { id: 1, name: "办公管理", pid: 0 }, { id: 2, name: &qu ...
常用的字符串方法 String ;
字符串: 1,str.charAt(num);//根据下标查找字符串中对应的字符,返回对应下标的字符; 2,str.charCodeAt(num);//字符串中下标对应的那位字符的 Unicode ...
JVM内存管理简单剖析
Java是一个跨平台语言,屏蔽操作系统的差异,无需关心复杂内存管理,做到编写一次到处运行.其强大的能力源于Java Virtual Machine (虚拟机)默默的付出.代码运行在虚拟机之上,虚拟机运 ...
github git.exe位置
C:\Users\yourname\AppData\Local\GitHub\PortableGit_69703d1db91577f4c666e767a6ca5ec50a48d243\bin\git. ...
【转】dig详解
[root@localhost ~]# dig www.a.com ; <<>> DiG 9.2.4 <<>> www.a.com ;; global ...
springboot 注入xml自定义类
新建入口类可扫描类: @Configuration @ImportResource(locations = {"classpath:spring-bean.xml"}) publi ...
2013亚洲区域赛长沙站 ZOJ 3732 Graph Reconstruction
题目链接 Graph Reconstruction 题意给你无向图每个点的度数, 问是否存在唯一解, 存在输出唯一解, 多解输出两个, 无解输出IMPOSSIBLE 思路这里用到了 Havel-H ...
机器学习规则:ML工程最佳实践----rules_of_ml section 2【翻译】
作者:黄永刚 ML Phase II: 特征工程第一阶段介绍了机器学习的一个周期,为学习系统获取训练数据,通过有趣的引导设计指标,创建一个服务框架.在有了一个完整系统之后,就进入了第一阶段. 第二阶 ...
怎么去除innerHTML获得内容中的标签？
去掉innerHTML获得内容里面的标签: <body> <div id="d1"><p id="p1">hello wor ...
C语言基础-第五章
流程控制 1.顺序结构顺序结构是指程序将按照书写的顺序一步步执行程序. 2.选择结构 2.1但分支结构语句 if(表达式){语句} 2.2双分支结构 if(表达式){}else if{} else{ ...

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

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

随机推荐

热门专题