doT.js的使用
引言
doT.js可以更好的在html端使用json数据。
{{ }} for evaluation 模板标记符
{{= }} for interpolation 输出显示,默认变量名叫it
{{! }} for interpolation with encoding 编码后输出显示
{{? }} for conditionals 条件分支,if条件的简写
{{~ }} for array iteration 遍历数组
使用
引入js
<script type="text/javascript" src="../script/doT.min.js"></script>
<!-- jquery 移动端替代品 -->
<script type="text/javascript" src="../script/zepto.min.js"></script>
<!--<script type="text/javascript" src="../script/jquery.min.js"></script>-->
功能点
1.for interpolation 赋值
格式:
{{= }}
数据源:
{"name":"Jake","age":31}
区域:
<div id="interpolation"></div>
模板:
<script id="interpolationtmpl" type="text/x-dot-template">
<div>Hi {{=it.name}}!</div>
<div>{{=it.age || ''}}</div>
</script>
调用方式:
var dataInter = {"name":"Jake","age":31};
var interText = doT.template($("#interpolationtmpl").text());
$("#interpolation").html(interText(dataInter));
2.for evaluation for in 循环
格式:
{{ for var key in data { }}
{{= key }}
{{ } }}
数据源:
{"name":"Jake","age":31,"interests":["basketball","hockey","photography"],"contact":{"email":"jake@xyz.com","phone":"999999999"}}
区域:
<div id="evaluation"></div>
模板:
<script id="evaluationtmpl" type="text/x-dot-template">
{{ for(var prop in it) { }}
<div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>
{{ } }}
</script>
调用方式:
var dataEval = {"name":"Jake","age":31,"interests":["basketball","hockey","photography"],"contact":{"email":"jake@xyz.com","phone":"999999999"}};
var evalText = doT.template($("#evaluationtmpl").text());
$("#evaluation").html(evalText(dataEval));
3.for array iteration 数组
格式:
{{~data.array :value:index }}
...
{{~}}
数据源:
{"array":["banana","apple","orange"]}
区域:
<div id="arrays"></div>
模板:
<script id="arraystmpl" type="text/x-dot-template">
{{~it.array:value:index}}
<div>{{= index+1 }}{{= value }}!</div>
{{~}}
</script>
调用方式:
var dataArr = {"array":["banana","apple","orange"]};
var arrText = doT.template($("#arraystmpl").text());
$("#arrays").html(arrText(dataArr));
4.for conditionals 条件
格式:
{{? }} if
{{?? }} else if
{{??}} else
数据源:
{"name":"Jake","age":31}
区域:
<div id="condition"></div>
模板:
<script id="conditionstmpl" type="text/x-dot-template">
{{? it.name }}
<div>Oh, I love your name, {{=it.name}}!</div>
{{?? !it.age === 0}}
<div>Guess nobody named you yet!</div>
{{??}}
You are {{=it.age}} and still dont have a name?
{{?}}
</script>
调用方式:
var dataCondition = {"age":31};
var conText = doT.template($("#conditionstmpl").text());
$("#condition").html(conText(dataCondition));
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& ...
- doT.js实例详解
doT.js详细介绍 doT.js特点是快,小,无依赖其他插件.官网:http://olado.github.iodoT.js详细使用介绍 使用方法:{{= }} for interpolation{ ...
随机推荐
- 道里云SDN云网络技术:使云能够“众筹”
容器云来了! 容器云的网络规模将比虚拟机云的情况扩大10-100倍,容器云与虚拟机云互联需求也将使云网络管控复杂度成数倍增长.SDN业界迎来了空前挑战.本报告分享道里云公司SDN技术:怎样将云的 ...
- 自定义TempData跨平台思路
一:TempData的自定义实现... TempData是用Session实现的,既然是Session,那模式是线程方式...这样的Session是没法进行跨平台的... 那么这就涉及到如何在多台机器 ...
- SSH 项目中 用Hibernate底层 简单的封装DAO层
废话不多少了,主要是使用hibernate的查询方法,自己封装了DAO层,供service来方便使用. 首先:必须要继承的 public class CommonDao extends Hiberna ...
- Primitive data types recap
- Prime Distance POJ - 2689 线性筛
一个数 $n$ 必有一个不超过 $\sqrt n$ 的质因子. 打表处理出 $1$ 到 $\sqrt n$ 的质因子后去筛掉属于 $L$ 到 $R$ 区间的素数即可. Code: #include&l ...
- hdu 5691 Sitting in line 状压动归
在本题中,n<=16n<=16n<=16, 不难想到可以将所选数字的编号进行状态压缩. 定义状态 dp[S][j]dp[S][j]dp[S][j],其中 SSS 代表当前所选出的所有 ...
- Pyhton学习——Day5
# s=set('hello')# print(s)## s=set(['alex','alex','sb'])# print(s) # s={1,2,3,4,5,6} #添加# s.add('s') ...
- jq——事件
http://www.w3school.com.cn/jquery/jquery_ajax_intro.asp $(document),$(body) 加载事件: $(document).ready( ...
- 如何使用图形界面Webmin管理linux服务器
出处:http://linux.cn/thread/11992/1/1/ 如何使用图形界面Webmin管理linux服务器 一台典型的linux服务器运行命令行环境中,并已经包括了一些用于安装和配置各 ...
- BZOJ 3262 陌上花开 (三维偏序CDQ+树状数组)
题目大意: 题面传送门 三维偏序裸题 首先,把三元组关于$a_{i}$排序 然后开始$CDQ$分治,回溯后按$b_{i}$排序 现在要处理左侧对右侧的影响了,显然现在左侧三元组的$a_{i}$都小于等 ...