概述
学习资料：
doT.js模板引擎的使用http://www.fantxi.com/blog/archives/dot-template/comment-page-1#comments
dot.js是一个模板框架，在web前端使用。
doT.min.js是dot.js的压缩版。
简单demo代码：
html、javascript代码一览：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body >
<ul id='showInfo'>
<script type="text/template" charset="utf-8" id='template_1'>
{{if( it && it.length>0 ){ }}
{{for(var i=0; i<it.length; i++){ }}
<li>{{=it[i].name}}</li>
{{ } }}
{{ }else{ }}
<li>没有数据。</li>
{{ } }}
</script>
</ul>
<br>
<hr >
<br>
<ul id='showInfo2'>
</ul>
</body>
<script type="text/javascript" charset="utf-8" src='doT.min.js'></script>
<script type="text/javascript" charset="utf-8">
var template=document.getElementById('template_1').innerHTML;
var obj=[{name:'d1'},{name:'d2'},{name:'d3'}];
//传递一个有数据的数组进去
document.getElementById('showInfo').innerHTML=doT.template( template )( obj );
//传入的数据为空
document.getElementById('showInfo2').innerHTML=doT.template( template )( [] );
</script>
</html>dot.js作为模板引擎，
主要的用途就是，在写好的模板上，放进数据，生成含有数据的html代码。
这是很简单的web前端模板框架，
简单说几个东西，你就会用了！
1、在模板中，it这个变量，就是传递进去的数据对象，应该就是英语的items；
2、doT.template( template )( obj ) 代码解释：把模板template，作为参数传入doT.template() 方法，dot就把模板处理一下，然后你再把数据对象传入，返回值，就是html与数据 一起生成的html代码了，再拼接到页面即可；
3、在模板中，{{}} 包裹的内容，就是javascript代码，dot会负责处理，因为这写法怪异，新手一般出现模板写错的情况，仔细排查即可 。
使用方法：
{{= }} for 赋值
{{ }} for evaluation
{{~ }} for for循环数组
{{? }} for if判断
{{! }} for html标签是否转义
{{# }} for compile-time evaluation/includes and partials
{{## #}} for compile-time defines
dot.js调用方式：
var tmpText = doT.template(模板);
tmpText(数据源);
例子一：
1、for interpolation 赋值
格式：
{{= }}
数据源：{“name”:”Jake”,”age”:31}
区域:
模板：
调用方式：
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”}}
区域：
模板：
{{ for(var prop in it) { }}调用方式：
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”]}
区域：
模板：
{{~it.array:value:index}}调用方式：
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}
区域：
模板： {{? !it.name }}
调用方式：
var dataEncode = {“uri”:”http://bebedo.com/?keywords=Yoga“,”html”:”
var EncodeText = doT.template( (“#encodetmpl”).text());(“#encode”).html(EncodeText(dataEncode));
例子五：
5、for interpolation with encoding
数据源：{“uri”:”http://bebedo.com/?keywords=Yoga“}
格式：
{{!it.uri}}
区域：
模板：
Visit {{!it.uri}} {{!it.html}}调用方式：
var dataEncode = {“uri”:”http://bebedo.com/?keywords=Yoga“,”html”:”
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}
区域：
模板：
#}} {{#def.snippet}} {{=it.html}}调用方式：
var dataPart = {“name”:”Jake”,”age”:31,”html”:”
var defPart = {“joke”:”
var partText = doT.template( (“#parttmpl”).text(), undefined, defPart);(“#part”).html(partText(dataPart));
最后
以上就是粗心发夹为你收集整理的doT.js 模板引擎学习摘记的全部内容，希望文章能够帮你解决doT.js 模板引擎学习摘记所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复