doT.js具体使用介绍
官网:
http://olado.github.iodoT.js具体使用介绍
用法:
{{= }} for interpolation
{{ }} for evaluation
{{~ }} for array iteration
{{?
}} for conditionals
{{! }} for interpolation with encoding
{{# }} for compile-time evaluation/includes and partials
{{## #}} for compile-time defines
调用方式:
var tmpText = doT.template(模板);
tmpText(数据源);
样例一:
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 dataEncode = {"uri":"http://bebedo.com/?keywords=Yoga","html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
var EncodeText = doT.template($("#encodetmpl").text());
$("#encode").html(EncodeText(dataEncode));
样例五:
5、for interpolation with encoding
数据源:{"uri":"http://bebedo.com/?keywords=Yoga"}
格式:
{{!it.uri}}
区域:<div id="encode"></div>
模板:
<script id="encodetmpl" type="text/x-dot-template">
Visit {{!it.uri}} {{!it.html}}
</script>
调用方式:
var dataEncode = {"uri":"http://bebedo.com/?
keywords=Yoga","html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
var EncodeText = doT.template($("#encodetmpl").text());
$("#encode").html(EncodeText(dataEncode));
样例六:
6、{{# }} for compile-time evaluation/includes and partials
{{## #}} for compile-time defines
数据源:{"name":"Jake","age":31}
区域:<div id="part"></div>
模板:
<script id="parttmpl" type="text/x-dot-template">
{{##def.snippet:
<div>{{=it.name}}</div>{{#def.joke}}
#}}
{{#def.snippet}}
{{=it.html}}
</script>
调用方式:
var dataPart = {"name":"Jake","age":31,"html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
var defPart = {"joke":"<div>{{=it.name}} who?</div>"};
var partText = doT.template($("#parttmpl").text(), undefined, defPart);
$("#part").html(partText(dataPart));
doT.js具体使用介绍的更多相关文章
- doT.js使用介绍
doT.js特点是快,小,无依赖其他插件,压缩版仅有4K大小. doT.js详细使用介绍 使用方法: 1 2 3 4 5 6 7 {{ }} 模板 开始标记 结束标记 {{= }} 赋值 {{~ ...
- doT.js详细介绍
doT.js详细介绍 doT.js特点是快,小,无依赖其他插件. 官网:http://olado.github.iodoT.js详细使用介绍 使用方法:{{= }} for interpolati ...
- 模板引擎doT.js介绍及如何判断对象为空、如何嵌套循环···
doT.js 灵感来源于搜寻基于 V8 和 Node.js ,强调性能,最快速最简洁的 JavaScript 模板函数 引入 javascript 文件: <script type=" ...
- doT.js源码解读
doT.js非常的简洁.全部代码也就200行不到.它的基本思路就是通过强大的正则表达式,把模块转变成可执行的函数,动态生成html字符串.核心new Function(c.varname, str); ...
- js模板引擎介绍搜集
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- dot.js教程文档api
dot.js是一个短小精悍的js模板引擎,压缩版仅有4K大小,最近使用dot的时候整理出这个dot.js教程文档,其实称不上什么教程,只是对dot.js的介绍和实例,希望能帮助到一部分需要的人. 使用 ...
- doT.js实例详解
doT.js详细介绍 doT.js特点是快,小,无依赖其他插件.官网:http://olado.github.iodoT.js详细使用介绍 使用方法:{{= }} for interpolation{ ...
- MVVM前后分离轻量级框架应用juicer和doT.js
前言 前后端开发分的越来越细化,为了方便前端工程师更好的调试后端工程师嵌套的代码,前后分离技术就出现了,简单理解其实就是Ajax异步将数据提供给JavaScript,由JavaScript进 ...
- dot.js使用心得
一.dot.js介绍 最近用到的数据模板引擎有很多,今天讲的doT.js也是其中一种. doT.js的特点是体积小,速度快,并且不依赖其他插件. 官网下载:http://olado.github.io ...
随机推荐
- C语言中的内存相关问题
内存是用来存储数据与程序的,对我们写程序来说非常重要.所以内存对程序来说几乎是本质需求.越简单的程序需要越少的内存,而越庞大越复杂的程序需要更多的内存. 注意:在嵌入式系统中有ROM和RAM两类内存, ...
- ubuntu 12.04LTS下搭建Andriod开发环境记录
今天在Ubuntu 12.04 LTS 下安装了android开发环境. 1, 安装JDK 先去 Oracle下载Linux下的JDK压缩包,我下载的是jdk-7u4-linux-i586.tar.g ...
- 多线程中sleep和wait的区别
前几天去UC笔试,有一道简答题问到了.之前还真一直没留意到这个问题,所以答得也不好. 无论学习什么都好,通过对比学习更有利于发现事物的共性和个性,对于知识点的理解更有明显效果(这也可能是UC笔试题上, ...
- 搭建https本地服务器:如何得到被所有客户端认可的ssl证书
https,作为http的加密版,作用还是很大的:能够提升网站搜索权重,让你的网站更安全,而且如果你的网站没有使用https的话,将无法作为移动设备原生应用的api接口.可见掌握为网站启用https的 ...
- Linux笔记:crond
crontab中列出需要执行的命令及执行时间.由于指定的日期Day与星期Week不是相互包含的关系,而是有相交也有不相交的时间.当日期数与星期数均指定为确定值的时候,指令的执行时间到底是什么样的,之前 ...
- Java NIO.2 使用Files类遍历文件夹
在以前的Java版本中,如果要遍历某个文件夹下所有的子文件.子文件夹,需要我们自己写递归,很麻烦. 在Java7以后,我们可以NIO.2中的Files工具类来遍历某个文件夹(会自动递归). 大致用法: ...
- 【Kafka】《Kafka权威指南》——写数据
不管是把 Kafka 作为消息队列.消息.总线还是数据存储平台来使用 ,总是需要有一个可以往 Kafka 写入数据的生产者和一个可以从 Kafka读取数据的消费者,或者一个兼具两种角 色的应用程序. ...
- [BUG] CS0234: 命名空间“System.Web.Mvc”中不存在类型或命名空间名称“Ajax”(是否缺少程序集引用?)
写在前面 在浏览view的时候,突然出现这个错误,不过还是很好解决的. bug 解决方案
- 聊聊、Zookeeper API
今天我们来说说 Zookeeper 客户端启动,整个文章分三个部分:第一部分是 Zookeeper 原生 API 客户端,第二部分是开源客户端 ZkClient,第三部分是开源客户端 Curator. ...
- Scut游戏服务器引擎之Unity3d接入
Scut提供Unity3d Sdk包,方便开发人员快速与Scut游戏服务器对接: 先看Unity3d示例如下: 启动Unity3d项目 打开Scutc.svn\SDK\Unity3d\Assets目录 ...