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{ ...
随机推荐
- Android UI 优化 使用<include/>和 <merge />标签
使用<include /> 标签来重用layout代码 如果在一个项目中需要用到相同的布局设计,可以通过<include /> 标签来重用layout代码,该标签在Androi ...
- ES JVM使用如果超过75%就会GC较多,导致ES索引性能下降
转自:https://www.elastic.co/guide/en/cloud/current/ec-metrics-memory-pressure.html Scenario: How Does ...
- 【IOI 2011】Race
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2599 [算法] 点分治 [代码] #include<bits/stdc++.h ...
- Linux下编译安装Memcache
需要gcc,make,cmake,autoconf,libtool等工具,联网后,yum install -y gcc,make,cmake,autoconf,libtool 编译安装libevent ...
- 截图 gif 图小工具
GifCam gyazo gyazo.com Windows 10 中的内置截屏(Win+G)
- android夜间模式切换
1.记录个最简单的夜间模式的实现 2.styles.xml <style name="DayTheme" parent="AppTheme"> &l ...
- mysql+spring+mybatis实现数据库读写分离[代码配置] .
场景:一个读数据源一个读写数据源. 原理:借助spring的[org.springframework.jdbc.datasource.lookup.AbstractRoutingDataSource] ...
- 无意中发现destoon5商城处理订单时的一些bug
最新的destoon5在商城的商品中加入了商品属性的功能,可以使用三个商品属性 而在代码中用如“49-3-0-0”来标记所选择的的商品及属性,其中第一个数字是商品的id,后三个表示的是商品对应的属性值 ...
- 随手记之TCP Keepalive笔记-tcp_keepalive_timer
这里可以找到大部分处理逻辑,net/ipv4/Tcp_timer.c: static void tcp_keepalive_timer (unsigned long data) { struct so ...
- servletconfig和servletcontext学习
servletconfig java.lang.String getInitParameter(java.lang.String name) //根据参数名获取参数值 java.util.Enume ...