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

随机推荐

洛谷 P4932 浏览器 (思维题)
题目大意:给你一个序列,求满足$x_{i}\: xor\; x_{j}$在二进制下1的数量为奇数的数对数量打月赛的时候真没想出来,还是我太弱.. xor意义下,对于两个数,假设它们两个每一位都是2个 ...
Python实现机器人语音聊天
一.前言说明 1.功能简述登录后进入聊天界面,如果服务器都在同一个地址,则都进入同一个房间进入/离开/发消息同一房间用户都可以看到,输入“tuling”或“chatbot”可以切换为和Tuling ...
FZU 1980 AbOr's story
AbOr's story Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on FZU. Original I ...
HDU 3108 Ant Trip
Ant Trip Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...
洛谷 P1702 突击考试
P1702 突击考试题目描述一日,老师决定进行一次突击考试.已知每个学生都有一个考试能力等级,教室里一共有N个课桌,按照顺序排成一列,每张课桌可以坐两个人,第i张课桌坐的两个人的能力等级为(A[i ...
获取系统信息（CPU、内存等）
简述获取计算机CPU.主板.内存.硬盘.网卡这些信息,Qt中没有相应的处理,所以需要根据平台来做差异化处理.也许Qt为了跨平台,没有提供与操作系统和硬件密切相关的一些功能(如内存.CPU.硬盘等相关 ...
HDOJ 5008 Boring String Problem
后缀数组+RMQ+二分后缀数组二分确定第K不同子串的位置 , 二分LCP确定可选的区间范围 , RMQ求范围内最小的sa Boring String Problem Time Limit: 6000 ...
HDU 4930 Fighting the Landlords(暴力枚举+模拟)
HDU 4930 Fighting the Landlords 题目链接题意:就是题中那几种牌型.假设先手能一步走完.或者一步让后手无法管上,就赢思路:先枚举出两个人全部可能的牌型的最大值.然后再 ...
怎样实如今Windows下编写的代码，直接在Linux下编译
方法一: 怎样实如今Windows7下编写Linux程序.写完程序以后.不用复制文件,直接在Linux(RHEL6.5)机器上编译最新的代码. 1.首先将Windows的代码目录设置为共享目录: 2. ...
ubuntu,jdk安装成功后，点击eclipse，提示信息A Java RunTime Environment (JRE) or Java Development Kit (JDK)
A Java RunTime Environment (JRE) or Java Development Kit (JDK) must be available in order to run Ecl ...

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

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

随机推荐

热门专题