doT.js详细介绍

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

doT.js特点是快,小,无依赖其他插件。

官网:
http://olado.github.io

doT.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));











目录
相关文章
|
9月前
|
机器学习/深度学习 存储 并行计算
Ascend上的PageAttention
PageAttention旨在解决大型语言模型(LLM)服务中的内存管理低效问题,如内存碎片化、利用率低及缺乏灵活的内存共享机制。通过借鉴操作系统中的虚拟内存和分页技术,PageAttention实现了块级别的内存管理和灵活的KV cache共享机制,显著提高内存利用率,降低延迟,提升模型处理速度和性能。相比传统注意力机制,PageAttention通过分段处理序列,有效解决了长序列处理时的计算效率低下和内存过度使用问题。
|
5月前
|
API C++
【Azure Developer】VS Code上登录China Azure遇见错误:CAA20002
在VS Code中安装Azure Resource插件后,修改云环境为中国区Azure时,可能会遇到错误代码CAA20002。解决办法是将Microsoft Account的Client ID Version从默认的v1修改为v2。具体操作为:打开VS Code设置页面“Setting”,输入“microsoft account”过滤配置,在Microsoft中找到Client ID Version并将其值更改为v2。完成后测试登录即可成功。相关参考资料可查阅GitHub上的VS Code Azure登录问题讨论。
115 8
|
10月前
|
人工智能 Rust 前端开发
前端界的未来趋势:掌握这些新技术,让你的作品走在时代前沿!
【10月更文挑战第30天】前端开发正以前所未有的速度发展,新技术层出不穷。本文探讨了AI助手(如GitHub Copilot)、低代码/无代码平台、跨平台技术(如React Native)和WebAssembly等未来主流技术,并附上示例代码,帮助你走在时代前沿。
439 1
|
11月前
|
监控 Java 开发者
BeanPostProcessor:Spring框架的灵活扩展机制
【10月更文挑战第4天】在Spring框架中,BeanPostProcessor接口是一个非常重要的扩展点,它允许开发者在Spring容器实例化、依赖注入以及初始化Bean的过程中插入自定义逻辑。
170 0
|
7月前
|
弹性计算 运维 自然语言处理
评测报告:OS Copilot 功能体验与效率提升
作为一名运维工程师,我体验了阿里云OS Copilot智能助手。选择Alibaba Cloud Linux ECS实例安装并运行OS Copilot,通过命令`sudo yum install -y os-copilot`完成安装。重点测试了-t、-f及管道功能:-t参数提升任务执行效率约30%,-f实现一键处理复杂任务,管道功能简化参数理解与配置。整体评价认为该工具实用高效,建议增加预设模板和优化自然语言理解能力。
|
9月前
|
安全 程序员 编译器
【C语言】const 关键字详解
`const`关键字在C语言中用于定义常量,提供只读的变量。这意味着一旦初始化,`const`变量的值不能再被修改。下面详细介绍`const`关键字的用法、作用以及其在不同上下文中的应用。
603 2
|
9月前
|
存储 人工智能 数据管理
|
9月前
|
NoSQL 测试技术 PHP
新手从事直播软件源码开发搭建经验与技巧
新手技术从事直播软件源码开发,从需求调研、技术架构、功能逻辑、技术语言、压力测试等全面剖析。
|
11月前
|
存储 自然语言处理 程序员
C++常用基础知识—STL库(1)
C++常用基础知识—STL库(1)
182 1
|
存储 监控 算法