doT.js 模板引擎

2023-11-05 09:18
文章标签 模板 js 引擎 dot

本文主要是介绍doT.js 模板引擎,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

插件描述:doT模板方便快捷的组织页面DOM

doT.js特点是快,小,无依赖其他插件。压缩版仅有4K大小,最近使用dot的时候整理出这个dot.js教程api文档,是对dot.js的介绍和实例,希望能帮助到一部分需要的人。

doT.js详细使用介绍

使用方法:

1

2

3

4

5

6

7

{{= }} for interpolation

{{ }} for evaluation

{{~ }} for array iteration

{{? }} for conditionals

{{! }} for interpolation with encoding

{{# }} for compile-time evaluation/includes and partials

{{## #}} for compile-time defines

调用方式:

1

2

var tmpText = doT.template(模板);

tmpText(数据源);

 

例子一:

1、for interpolation 赋值

格式:

1

{{= }}

数据源:

1

{"name":"Jake","age":31}

区域:

1

<div id="interpolation"></div>

模板:

1

2

3

4

<script id="interpolationtmpl" type="text/x-dot-template">

    <div>Hi {{=it.name}}!</div>

    <div>{{=it.age || ''}}</div>

</script>

调用方式:

1

2

3

var dataInter = {"name":"Jake","age":31};

var interText = doT.template($("#interpolationtmpl").text());

$("#interpolation").html(interText(dataInter));

例子二:

2、for evaluation for in 循环

格式:

1

2

3

{for var key in data { }} 

{{= key }} 

{{ } }}

数据源:

1

{"name":"Jake","age":31,"interests":["basketball","hockey","photography"],"contact":{"email":"jake@xyz.com","phone":"999999999"}}

区域:

1

<div id="evaluation"></div>

模板:

1

2

3

4

5

<script id="evaluationtmpl" type="text/x-dot-template">

    {for(var prop in it) { }}

        <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>

    {{ } }}

</script>

调用方式:

1

2

3

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 数组

格式:

1

2

3

{{~data.array :value:index }}

    ...

{{~}}

数据源:

1

{"array":["banana","apple","orange"]}

区域:

1

<div id="arrays"></div>

模板:

1

2

3

4

5

<script id="arraystmpl" type="text/x-dot-template">

    {{~it.array:value:index}}

        <div>{{= index+1 }}{{= value }}!</div>

    {{~}}

</script>

调用方式:

1

2

3

var dataArr = {"array":["banana","apple","orange"]};

var arrText = doT.template($("#arraystmpl").text());

$("#arrays").html(arrText(dataArr));

例子四:

4、{{? }} for conditionals 条件

格式:

1

2

3

{{? }} if

{{?? }} else if

{{??}} else

数据源:

1

{"name":"Jake","age":31}

区域:

1

<div id="condition"></div>

模板:

1

2

3

4

5

6

7

8

9

<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>

调用方式:

1

2

3

var dataEncode = {"uri":"http://jq22.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

数据源:

1

{"uri":"http://jq22.com/?keywords=Yoga"}

格式:

1

{{!it.uri}}

区域:

1

<div id="encode"></div>

模板:

1

2

3

<script id="encodetmpl" type="text/x-dot-template">

    Visit {{!it.uri}} {{!it.html}}

</script>

调用方式:

1

2

3

var dataEncode = {"uri":"http://jq22.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

数据源:

1

{"name":"Jake","age":31}

区域:

1

<div id="part"></div>

模板:

1

2

3

4

5

6

7

<script id="parttmpl" type="text/x-dot-template">

    {{##def.snippet:

    <div>{{=it.name}}</div>{{#def.joke}}

    #}}

    {{#def.snippet}}

    {{=it.html}}

</script>

调用方式:

1

2

3

4

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 模板引擎的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/348860

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

poj3468(线段树成段更新模板题)

题意:包括两个操作:1、将[a.b]上的数字加上v;2、查询区间[a,b]上的和 下面的介绍是下解题思路: 首先介绍  lazy-tag思想:用一个变量记录每一个线段树节点的变化值,当这部分线段的一致性被破坏我们就将这个变化值传递给子区间,大大增加了线段树的效率。 比如现在需要对[a,b]区间值进行加c操作,那么就从根节点[1,n]开始调用update函数进行操作,如果刚好执行到一个子节点,

C++11第三弹:lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页: 南桥几晴秋 🌈C++专栏: 南桥谈C++ 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据库学习专栏: 南桥谈MySQL 🌈Qt学习专栏: 南桥谈Qt 🌈菜鸡代码练习: 练习随想记录 🌈git学习: 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

poj 1258 Agri-Net(最小生成树模板代码)

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码:效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n

uva 1342 欧拉定理(计算几何模板)

题意: 给几个点,把这几个点用直线连起来,求这些直线把平面分成了几个。 解析: 欧拉定理: 顶点数 + 面数 - 边数= 2。 代码: #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstring>#include <cmath>#inc

uva 11178 计算集合模板题

题意: 求三角形行三个角三等分点射线交出的内三角形坐标。 代码: #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstring>#include <cmath>#include <stack>#include <vector>#include <

poj 2104 and hdu 2665 划分树模板入门题

题意: 给一个数组n(1e5)个数,给一个范围(fr, to, k),求这个范围中第k大的数。 解析: 划分树入门。 bing神的模板。 坑爹的地方是把-l 看成了-1........ 一直re。 代码: poj 2104: #include <iostream>#include <cstdio>#include <cstdlib>#include <al

最大流、 最小费用最大流终极版模板

最大流  const int inf = 1000000000 ;const int maxn = 20000 , maxm = 500000 ;struct Edge{int v , f ,next ;Edge(){}Edge(int _v , int _f , int _next):v(_v) ,f(_f),next(_next){}};int sourse , mee

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件