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

随机推荐

【转载】如何学习C++
原文地址: http://www.hankcs.com/program/cpp/how_to_learn_c__.html 1.把C++当成一门新的语言学习(和C没啥关系!真的.): 2.看<T ...
红黑树(RBTREE)之上-------构造红黑树
该怎么说呢,现在写代码的速度还是很快的,很高兴,o(^▽^)o. 光棍节到了,早上没忍住,手贱了一般,看到*D的优惠,买了个机械键盘,晚上就到了,敲着还是很舒服的,和老婆炫耀了一把哈哈. 光棍节再去* ...
大海教你学手游2015CocosLua第一季_00课程介绍
话说大盘从5100直掉到3500点,千仅仅股票跌幅超过20%,跌跌不休.散户.证监会.做空机构開始斗气地主来了: 散户:叫地主空头:抢地主,3分证监会:pass 空头:压死证监会:不要散户:不 ...
wireshark界面调整成英文的
https://ask.wireshark.org/questions/48823/change-the-gui-language 英文版设置 From the Edit (Bearbeiten) m ...
js 使用(不断更新...)
1.JS 对象(Object)和字符串(String)互转 var jsObj = {}; jsObj.testArray = [1, 2, 3, 4, 5]; jsObj.name = 'CSS3' ...
8.ES6测试
转自:http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html 如果测试脚本是用ES6写的,那么运行测试之前,需 ...
react --- React中state和props分别是什么？
props React的核心思想就是组件化思想,页面会被切分成一些独立的.可复用的组件. 组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从外 ...
powerdesigner里的table背景色是不是可以修改的？
Tools->Display Preferences->Format->Table->Modify->Fill->Fill color:
Android Gallery和ImageSwitcher同步自动(滚动)播放图片库
本文主要内容是如何让Gallery和ImageSwitcher控件能够同步自动播放图片集 ,看起来较难,然而,实现的方法非常简单, 请跟我慢慢来.总的来说,本文要实现的效果如下图:(截图效果不怎么好) ...
SqlServer 删除日志
1 数据库在使用过程中会使日志文件不断增加,使得数据库的性能下降,并且占用大量的磁盘空间.SQL Server数据库都有log文件,log文件记录用户对数据库修改的操作.可以通过直接删除log文件和 ...

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

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

随机推荐

热门专题