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

随机推荐

Tomcat跨域资源共享
1.下载Jar包 cors-filter-1.7.jar java-property-utils-1.9.jar 下载完成后将Jar拷贝到tomcat下lib目录中 2.修改web.xml配置在29 ...
thttpd 在S3C6410的移植-web服务程序的应用
1. 在VMWare 虚拟机上将arm-linux-gcc 4.3.1配置好:2. 下载thttpd软件包并解压:3. 在thttpd根目录下运行: ./configure:4. ...
2015 Multi-University Training Contest 2 hdu 5303 Delicious Apples
Delicious Apples Time Limit: 5000/3000 MS (Java/Others) Memory Limit: 524288/524288 K (Java/Other ...
Java 二进制，八进制，十进制，十六进制转换
A.十进制转换其他十进制转成二进制 Integer.toBinaryString(int i) 十进制转成八进制 Integer.toOctalString(int i) 十进制转成十六进制: ...
Java NIO笔记(一)：NIO介绍
Java NIO即Java Non-blocking IO(Java非堵塞I/O),由于是在Jdk1.4之后添加的一套新的操作I/O工具包,所以通常会被叫做Java New IO.NIO是为提供I/O ...
Zepto源代码分析之二~三个API
因为时间关系:本次仅仅对这三个API($.camelCase.$.contains.$.each)方法进行分析第一个方法变量转驼峰:$.camelCase('hello-world-welcome' ...
LintCode-赋值运算符重载
实现赋值运算符重载函数.确保: 新的数据可准确地被复制旧的数据可准确地删除/释放可进行 A = B = C 赋值您在真实的面试中是否遇到过这个题? Yes 例子假设进行 A = B 赋值.则 ...
nj09---util、inherits、inspect、events、error
一.util全局变量 1.util.inherits(constructor,superConstructor) 此方法是一个实现对象间原型继承的函数.javaScript通过原型赋值来实现继承,细节 ...
Android 进程常驻（0）----MarsDaemon使用说明
版权声明:本文为博主原创文章,未经博主允许不得转载. 这是一个轻量级的库,配置几行代码,就可以实现在Android上实现进程常驻,也就是在系统强杀下,以及360获取root权限下,clean mast ...
我的modelsim常用DO文件设置
在modelsim中使用do文件是非常方便的进行仿真的一种方法,原来接触到的一些项目不是很大,用modelsim仿真只需要仿真单独的一些模块,最近接触的项目比较大,是几个人分开做的,所以前后模块的联合 ...

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

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

随机推荐

热门专题