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 <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;">
<!--<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 ...