doT.js 模板引擎学习摘记

最新推荐文章于 2023-04-28 08:18:41 发布

lloyvhe

最新推荐文章于 2023-04-28 08:18:41 发布

阅读量718

点赞数

分类专栏： web前端文章标签：模板引擎 dot-js web前端

web前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

学习资料：
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}

区域:

模板：

Hi {{=it.name}}!

调用方式：

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) { }}

KEY:{{= prop }}---VALUE:{{= it[prop] }}

{{ } }}

调用方式：

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”]}

区域：

模板：

{{= index+1 }}{{= value }}!

调用方式：

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}

区域：

模板：

Oh, I love your name, {{=it.name}}!

Guess nobody named you yet!

{{??}} You are {{=it.age}} and still dont have a name? {{?}}

调用方式：

var dataEncode = {“uri”:”http://bebedo.com/?keywords=Yoga“,”html”:”

html元素

“};
var EncodeText = doT.template(

(“#encodetmpl”).text()); $(“#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”:”

html元素

“};
var EncodeText = doT.template(

(“#encodetmpl”).text()); $(“#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”:”

html元素

“};
var defPart = {“joke”:”

{{=it.name}} who?

“};
var partText = doT.template(

(“#parttmpl”).text(), undefined, defPart); $(“#parttmpl”).text(), undefined, defPart);$ (“#part”).html(partText(dataPart));

lloyvhe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
doT.js 模板引擎学习摘记

学习资料： doT.js模板引擎的使用http://www.fantxi.com/blog/archives/dot-template/comment-page-1#commentsdot.js是一个模板框架，在web前端使用。doT.min.js是dot.js的压缩版。简单demo代码：html、javascript代码一览：<!DOCTYPE html><html><head><meta ht
复制链接

扫一扫