文章目录
- 总体结构
- 使用教程
- 1. 赋值
- 2. 数组
- 3. 条件
- 4. 编码渲染
- 5. 定义与引用公共模块
- 6. 循环
- Reference
总体结构
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dot</title> <!--引入jQuery和doT.js文件 --> <script src="assets/vendor/jquery/jquery-1.12.4.js"></script> <script src="assets/js/doT.js"></script> </head> <body> <!--显示区--> <!--js模板--> <!--数据源--> <!--模板渲染--> </body> </html>
下面的例子中使用的都是写死的数据，具体项目中数据源使用的是Ajax从后台获取数据
使用教程
1. 赋值
格式
复制代码
1
2{{= }}
Demo
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<!--显示区--> <div id="view"></div> <!--js模板--> <script type="text/x-dot-template" id="js-template"> <h1>Hello, {{=it.name}}!</h1> </script> <!--数据源--> <script> let json = { "name": "秋叶依剑", "age": "23" }; </script> <!--模板渲染--> <script> let tmpl = doT.template($("#js-template").html()); /*生成模板方法*/ $("#view").html(tmpl(json)); //数据渲染 </script>
2. 数组
格式
复制代码
1
2
3
4{{~it:value:index }} ... {{~}}
Demo
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29<!--显示区--> <div id="view"></div> <!--js模板--> <script type="text/x-dot-template" id="js-template"> <ul> {{~it:value:index}} <li>姓名: {{=value.name}} 年龄: {{=value.age}}</li> {{~}} </ul> </script> <!--数据源--> <script> let json = [{ "name": "张三", "age": 21 }, { "name": "李四", "age": 22 }, { "name": "王五", "age": 23 }]; </script> <!--模板渲染--> <script> let tmpl = doT.template($("#js-template").html()); /*生成模板方法*/ $("#view").html(tmpl(json)); //数据渲染 </script>
3. 条件
格式
复制代码
1
2
3
4
5
6
7
8
9
10
11
12{{? value.age >= 100}} <!--if(value.age == 100)--> <li>姓名: {{=value.name}} 年龄: 百岁老人</li> {{?? value.age <= 3}} <!--else if(value.age == 3)--> <li>姓名: {{=value.name}} 年龄: 可爱baby</li> {{??}} <!--else--> <li>姓名: {{=value.name}} 年龄: {{=value.age}}</li> {{?}} <!--结束条件判断-->
Demo
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41<!--显示区--> <div id="view"></div> <!--js模板--> <script type="text/x-dot-template" id="js-template"> <ul> {{~it:value:index}} {{? value.age >= 100}} <!--if(value.age == 100)--> <li>姓名: {{=value.name}} 年龄: 百岁老人</li> {{?? value.age <= 3}} <!--else if(value.age == 3)--> <li>姓名: {{=value.name}} 年龄: 可爱baby</li> {{??}} <!--else--> <li>姓名: {{=value.name}} 年龄: {{=value.age}}</li> {{?}} <!--结束条件判断--> {{~}} <!--结束数组循环--> </ul> </script> <!--数据源--> <script> let json = [{ "name": "张三", "age": 21 }, { "name": "李四", "age": 100 }, { "name": "王五", "age": 3 }]; </script> <!--模板渲染--> <script> let tmpl = doT.template($("#js-template").html()); /*生成模板方法*/ $("#view").html(tmpl(json)); //数据渲染 </script>
4. 编码渲染
将获取的数据以字符串的形式渲染，html标签不会被浏览器解析，可以防止代码注入
格式
复制代码
1
2{{! }}
Demo
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34<!--显示区--> <div id="view"></div> <!--js模板--> <script type="text/x-dot-template" id="js-template"> <ul> {{~it:value:index}} {{? value.age == 20}} <!--按照原来的样式形式输出，html标签会被浏览器解析--> <li>姓名: {{=value.name}} FreeStyle: {{=value.freeStyle}}</li> {{??}} <!--字符串的形式输出，html标签不会被浏览器解析，可以防止代码注入--> <li>姓名: {{=value.name}} FreeStyle: {{!value.freeStyle}}</li> {{?}} {{~}} </ul> </script> <!--数据源--> <script> let json = [{ "name": "张三", "age": 20, "freeStyle": "<h3>Rap</h3>" }, { "name": "李四", "age": 18, "freeStyle": "<h3>Basketball</h3>" }]; </script> <!--模板渲染--> <script> let tmpl = doT.template($("#js-template").html()); /*生成模板方法*/ $("#view").html(tmpl(json)); //数据渲染 </script>
5. 定义与引用公共模块
格式
复制代码
1
2
3
4
5
6
7<!--定义公共模块1--> {{##def.module1: ... #}} <!--引用模块1--> {{#def.module1}}
Demo
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42<!--显示区--> <div id="view"></div> <!--js模板--> <script type="text/x-dot-template" id="js-template"> <!--定义公共模块1--> {{##def.module1: <li style="color: red">姓名: {{=value.name}} FreeStyle: {{=value.freeStyle}} <span>你引用了模块1</span></li> #}} <!--定义公共模块2--> {{##def.module2: <li style="color: pink">姓名: {{=value.name}} FreeStyle: {{=value.freeStyle}} <span>你引用了模块2</span></li> #}} <ul> {{~it:value:index}} {{? value.age == 18}} <!--引用模块1--> {{#def.module1}} {{?? value.age == 20}} <!--引用模块2--> {{#def.module2}} {{?}} {{~}} </ul> </script> <!--数据源--> <script> let json = [{ "name": "张三", "age": 20, "freeStyle": "Rap" }, { "name": "李四", "age": 18, "freeStyle": "BasketBall" }]; </script> <!--模板渲染--> <script> let tmpl = doT.template($("#js-template").html()); /*生成模板方法*/ $("#view").html(tmpl(json)); //数据渲染 </script>
6. 循环
格式
每行JS语句均需要 {{ }}包住
复制代码
1
2
3
4
5
6
7
8
9{{ for(let i = 0; i < it.length; i++){ }} {{ let value = it[i]; }} {{ if(value.age === 20) { }} ... {{ }else{ }} ... {{ } }} {{ } }}
Demo
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42<!--显示区--> <div id="view"></div> <!--js模板--> <script type="text/x-dot-template" id="js-template"> <!--定义公共模块1--> {{##def.module1: <li style="color: red">姓名: {{=value.name}} FreeStyle: {{=value.freeStyle}} <span>你引用了模块1</span></li> #}} <!--定义公共模块2--> {{##def.module2: <li style="color: pink">姓名: {{=value.name}} FreeStyle: {{=value.freeStyle}} <span>你引用了模块2</span></li> #}} <ul> {{ for(let i = 0; i < it.length; i++){ }} {{ let value = it[i]; }} {{ if(value.age === 20) { }} {{#def.module1}} {{ }else{ }} {{#def.module2}} {{ } }} {{ } }} </ul> </script> <!--数据源--> <script> let json = [{ "name": "张三", "age": 20, "freeStyle": "Rap" }, { "name": "李四", "age": 18, "freeStyle": "BasketBall" }]; </script> <!--模板渲染--> <script> let tmpl = doT.template($("#js-template").html()); /*生成模板方法*/ $("#view").html(tmpl(json)); //数据渲染 </script>
Reference
- http://www.jq22.com/jquery-info8648
- https://www.cnblogs.com/zhao-yi/p/7485447.html
最后
以上就是迷人心锁最近收集整理的关于快速上手超级实用的JS模板引擎--doT.js的全部内容，更多相关快速上手超级实用内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复