doT.js实例详解
doT.js详细介绍
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用法详解
作为一名前端攻城师,经常会遇到从后台ajax拉取数据再显示在页面的情境,一开始我们都是从后台拉取再用字符串拼接的方式去更达到数据显示在页面! <!-- 显示区域 --> <div i ...
- JS hashMap实例详解
链接:http://www.jb51.net/article/85111.htm JS hashMap实例详解 作者:囧侠 字体:[增加 减小] 类型:转载 时间:2016-05-26我要评论 这篇文 ...
- JS JSOP跨域请求实例详解
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下 ...
- JavaScript学习笔记-实例详解-类(一)
实例详解-类(一): //每个javascript函数(除了bind())都自动拥有一个prototype对象// 在未添加属性或重写prototype对象之前,它只包含唯一一个不可枚举属性const ...
- 转载 《AngularJS》5个实例详解Directive(指令)机制
<AngularJS>5个实例详解Directive(指令)机制 大漠穷秋 本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载(三)DOCTYPE和字符集
在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HT ...
- 当里个当,免费的HTML5连载来了《HTML5网页开发实例详解》连载(一)
读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信“Flash之我见”中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得 ...
- js对象详解(JavaScript对象深度剖析,深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
- Bootstrap如何实现导航条?导航条实例详解
本文主要和大家分享Bootstrap实现导航实例详解,在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在 ...
随机推荐
- PHP之语言基础01 By ACReaper
1.PHP中的变量是不需要声明类型的,由$标识变量,变量的命名规则也是字母或者下划线开头,接着任意字符或者下划线. $PI = 3.14; $radius = 5; $cir = $PI * 2 * ...
- poj 2378 树型dp
和poj1655那道求树的重心基本上一样的,代码也没多大改动. 详情请见 #include<cstdio> #include<algorithm> #include<cs ...
- 关于iOS 5 Could not instantiate class named NSLayoutConstraint错误
因为使用Xcode 4.6.2,新建工程的时候SDK 6.1,但是要做低版本适配.在将iOS模拟器选为5.0编译运行时候出现Could not instantiate class named NSLa ...
- angularJs中自定义directive的数据交互
首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模 ...
- 开发人员如何上google查资源,如果浏览国外资源方法
启动浏览器后15秒左右,浏览器的右上角就会出现图标 启用防火墙功能(右上角墙形图标),这时候程序就会去寻找网上代理,从而达到访问GOOGLE的效果,提示如果不访问google网站,可再点击一下关闭防火 ...
- 动态SQL语句:定义(一)
文章系列 动态SQL语句:定义(一) 静态SQL与动态SQL 静态SQL:程序运行前,具有固定的形式和结构的SQL. 动态SQL:程序运行时,能够动态改变形式或结构的SQL. 一些思考和想法 在实际的 ...
- NET仿微信Oauth2.0
这个文章先说一说Oauth2.0的原理,再到应用场景,最后才是代码实现,这样才学会最终的思想,并在应用场景使用,所谓实践出真理. 1,Oauth2.0的原理 OAuth是一个关于授权(authoriz ...
- C++ STD accumulate函数
1. 介绍 用来计算特定范围内(包括连续的部分和初始值)所有元素的和,除此之外,还可以用指定的二进制操作来计算特定范围内的元素结果.其头文件在numeric中. 用次函数可以求和,构造前n项和的向量, ...
- Perception(0-1.1)
The perception modules run in the context of the process Cognition. They detect features in the imag ...
- 双色球机选算法java实现
双色球机选算法java实现 一.代码 package com.hdwang; import java.util.Random; /** * Created by admin on 2017/1/10. ...