官网:

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具体使用介绍的更多相关文章

  1. doT.js使用介绍

    doT.js特点是快,小,无依赖其他插件,压缩版仅有4K大小. doT.js详细使用介绍 使用方法: 1 2 3 4 5 6 7 {{ }} 模板   开始标记  结束标记 {{= }} 赋值 {{~ ...

  2. doT.js详细介绍

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

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

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

  4. doT.js源码解读

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

  5. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  6. dot.js教程文档api

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

  7. doT.js实例详解

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

  8. MVVM前后分离轻量级框架应用juicer和doT.js

    前言      前后端开发分的越来越细化,为了方便前端工程师更好的调试后端工程师嵌套的代码,前后分离技术就出现了,简单理解其实就是Ajax异步将数据提供给JavaScript,由JavaScript进 ...

  9. dot.js使用心得

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

随机推荐

  1. C语言中的内存相关问题

    内存是用来存储数据与程序的,对我们写程序来说非常重要.所以内存对程序来说几乎是本质需求.越简单的程序需要越少的内存,而越庞大越复杂的程序需要更多的内存. 注意:在嵌入式系统中有ROM和RAM两类内存, ...

  2. ubuntu 12.04LTS下搭建Andriod开发环境记录

    今天在Ubuntu 12.04 LTS 下安装了android开发环境. 1, 安装JDK 先去 Oracle下载Linux下的JDK压缩包,我下载的是jdk-7u4-linux-i586.tar.g ...

  3. 多线程中sleep和wait的区别

    前几天去UC笔试,有一道简答题问到了.之前还真一直没留意到这个问题,所以答得也不好. 无论学习什么都好,通过对比学习更有利于发现事物的共性和个性,对于知识点的理解更有明显效果(这也可能是UC笔试题上, ...

  4. 搭建https本地服务器:如何得到被所有客户端认可的ssl证书

    https,作为http的加密版,作用还是很大的:能够提升网站搜索权重,让你的网站更安全,而且如果你的网站没有使用https的话,将无法作为移动设备原生应用的api接口.可见掌握为网站启用https的 ...

  5. Linux笔记:crond

    crontab中列出需要执行的命令及执行时间.由于指定的日期Day与星期Week不是相互包含的关系,而是有相交也有不相交的时间.当日期数与星期数均指定为确定值的时候,指令的执行时间到底是什么样的,之前 ...

  6. Java NIO.2 使用Files类遍历文件夹

    在以前的Java版本中,如果要遍历某个文件夹下所有的子文件.子文件夹,需要我们自己写递归,很麻烦. 在Java7以后,我们可以NIO.2中的Files工具类来遍历某个文件夹(会自动递归). 大致用法: ...

  7. 【Kafka】《Kafka权威指南》——写数据

    不管是把 Kafka 作为消息队列.消息.总线还是数据存储平台来使用 ,总是需要有一个可以往 Kafka 写入数据的生产者和一个可以从 Kafka读取数据的消费者,或者一个兼具两种角 色的应用程序. ...

  8. [BUG] CS0234: 命名空间“System.Web.Mvc”中不存在类型或命名空间名称“Ajax”(是否缺少程序集引用?)

    写在前面 在浏览view的时候,突然出现这个错误,不过还是很好解决的. bug 解决方案

  9. 聊聊、Zookeeper API

    今天我们来说说 Zookeeper 客户端启动,整个文章分三个部分:第一部分是 Zookeeper 原生 API 客户端,第二部分是开源客户端 ZkClient,第三部分是开源客户端 Curator. ...

  10. Scut游戏服务器引擎之Unity3d接入

    Scut提供Unity3d Sdk包,方便开发人员快速与Scut游戏服务器对接: 先看Unity3d示例如下: 启动Unity3d项目 打开Scutc.svn\SDK\Unity3d\Assets目录 ...