基础的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灵活运用之嵌入使用的更多相关文章

  1. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  2. doT.js

    最近用到的数据模板引擎有很多,今天讲的doT.js也是其中一种. doT.js的特点是体积小,速度快,并且不依赖其他插件. 官网下载:http://olado.github.io 下面是用法: 模板引 ...

  3. doT.js学习

    doT.js特点是快,小,无依赖其他插件.但是一般和jquery一起使用 官网:http://olado.github.io 使用方法:{{= }} for interpolation{{ }} fo ...

  4. doT.js详细介绍

    doT.js详细介绍   doT.js特点是快,小,无依赖其他插件. 官网:http://olado.github.iodoT.js详细使用介绍 使用方法:{{= }} for interpolati ...

  5. doT.js源码解读

    doT.js非常的简洁.全部代码也就200行不到.它的基本思路就是通过强大的正则表达式,把模块转变成可执行的函数,动态生成html字符串.核心new Function(c.varname, str); ...

  6. 模板引擎doT.js介绍及如何判断对象为空、如何嵌套循环···

    doT.js 灵感来源于搜寻基于 V8 和 Node.js ,强调性能,最快速最简洁的 JavaScript 模板函数 引入 javascript 文件: <script type=" ...

  7. dot.js教程文档api

    dot.js是一个短小精悍的js模板引擎,压缩版仅有4K大小,最近使用dot的时候整理出这个dot.js教程文档,其实称不上什么教程,只是对dot.js的介绍和实例,希望能帮助到一部分需要的人. 使用 ...

  8. doT.js 模板引擎的使用

    dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...

  9. doT js模板入门

    doT.js github地址: doT.js 官方站点 实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. Laravel关联模型中过滤结果为空的结果集(has和with区别)

    首先看代码: $userCoupons = UserCoupons::with(['coupon' => function($query) use($groupId){ return $quer ...

  2. 网页里如何使用js屏蔽鼠标右击事件

    图片.png 在后台管理系统里面,遇到了这样的一个问题,右击ztree菜单,弹出修改界面,但是,现在确实这样的,右击默认弹出功能提示的框框,看上去似乎很影响自己想要的功能,只能禁用了,那么,网页里如何 ...

  3. hdu 4786 Fibonacci Tree 乱搞 智商题目 最小生成树

    首先计算图的联通情况,如果图本身不联通一定不会出现生成树,输出"NO",之后清空,加白边,看最多能加多少条,清空,加黑边,看能加多少条,即可得白边的最大值与最小值,之后判断Fibo ...

  4. C++ Primer笔记13_运算符重载_总结

    总结: 1.不能重载的运算符: . 和 .* 和 ?: 和 ::  和 sizeof 和 typeid 2.重载运算符有两种基本选择: 类的成员函数或者友元函数, 建议规则例如以下: 运算符 建议使用 ...

  5. JavaSript之prototype属性

    近期在JavaSript进行Array操作的时候发现没有删除节点的方法.而我要实现的效果须要不断调用删除节点的方法.查找了相关资料发现能够利用prototype属性给Array添加删除节点的方法.而且 ...

  6. mfc 链接 access 2007 数据库

    神马也不说了,直接给出源代码和project 原理这个东西 Google  下.都出来了.自己就说下作为新手 , 1 应该打印出,链接错误原因 2 应该将数据库放到project以下,特别注意这点 给 ...

  7. Appium - Android 对照 iOS

    Appium - Android 对照 iOS 作者: Max.Bai 时间: 2014/10 Appium - Android 对照 iOS Appium 支持Android也支持iOS.可是两者还 ...

  8. [洛谷P1169] [ZJOI2007] 棋盘制作 解题报告(悬线法+最大正方形)

    题目描述 国际象棋是世界上最古老的博弈游戏之一,和中国的围棋.象棋以及日本的将棋同享盛名.据说国际象棋起源于易经的思想,棋盘是一个 8×8 大小的黑白相间的方阵,对应八八六十四卦,黑白对应阴阳. 而我 ...

  9. vs2015发布项目到虚拟主机组策略阻止csc.exe程序问题

    这个问题之前碰到过一次,这次又碰到,就记录一下解决方法. 这个问题的产生的原因,据说是虚拟主机没有权限执行exe文件造成的,如果是独立服务器的话发布就不会出现这个问题. 使用VS2015发布web项目 ...

  10. SparkSQL基础

    * SparkSQL基础 起源: 1.在三四年前,Hive可以说是SQL on Hadoop的唯一选择,负责将SQL编译成可扩展的MapReduce作业.鉴于Hive的性能以及与Spark的兼容,Sh ...