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& ...
随机推荐
- UVA-1602 Lattice Animals 搜索问题(打表+set)
题目链接 https://vjudge.net/problem/UVA-1602 紫书的一道例题,跟之前的很多题目有很多不同. 本题不像是一般的dfs或bfs这样的搜索套路,而是另一种枚举思路. 题意 ...
- [USACO4.1]篱笆回路Fence Loops
题目:USACO Training 4.1(在官网上提交需加文件输入输出).洛谷P2738. 题目大意:给你一张图里的边集,让你求出这张图的最小环. 解题思路:求最小环很简单,用Floyd即可.最重要 ...
- state.sls web.apache
[root@master01 web]# salt 'node02' state.sls web.apache node02: ---------- ID: apache-inst ...
- ASP.NET-文件上传代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- word break相关问题的解法
https://leetcode.com/problems/word-break/?tab=Description 以及 https://leetcode.com/problems/concatena ...
- hadoop-06-http服务
hadoop-06-http服务 su root service httpd status service httpd stop vi /etc/httpd/conf/httpd.conf 修改:Do ...
- [MST] Loading Data from the Server using lifecycle hook
Let's stop hardcoding our initial state and fetch it from the server instead. In this lesson you wil ...
- PHP第九课 正則表達式在PHP中的使用
今天内容 1.正則表達式 2.数学函数 3.日期函数 4.错误处理 正則表達式: 1.模式修正符 2.五个经常使用函数 另外一个正則表達式的站点:http://www.jb51.net/tools/z ...
- 整合大量开源库项目(五)跳动的TextView JumpingBeans,良好体验的滚动条ConvenientBanner
转载请注明出处:王亟亟的大牛之路 时间过得非常快,这一系列已经写了第五篇了(感觉还要写好久).今天又引入了2个非常好用的库JumpingBeans,ConvenientBanner.首先.先看一下效果 ...
- (数据结构整理)NJUPT1054
这一篇博客以一些OJ上的题目为载体,整理一下数据结构.会陆续的更新. .. 我们都知道,数据结构的灵活应用有时能让简化一些题目的解答. 一.栈的应用 1.NJUPT OJ 1054(回文串的推断) 回 ...