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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/lib/template-web.js"></script>
<script src="/lib/jquery-3.6.0.js"></script>
</head>
<body>
<div class="content"></div>
<script type="text/html" id="template-web">
<div id="title">{{@ title}}</div>
<div>姓名：<span id="name">{{@ name}}</span></div>
<div>年龄：<span id="age">{{@ age}}</span></div>
<div>会员：<span id="isVIP">{{@ isVIP}}</span></div>
<div>注册时间：<span id="regTime">{{regTime | dateFormat}}</span></div>
<div>爱好：
<ul id="hobby">
{{each hobby}}
<li>索引是：{{$index}}, 循环项是：{{$value}}</li>
{{/each}}
</ul>
</div>
<div>
{{if flag===0}}
flag的值是0
{{else if flag===1}}
flag的值是1
{{/if}}
</div>
</script>
<script>
// 2 定义渲染数据
var data = {
title: '<h3>用户信息</h3>',
name: 'zs',
age: 20,
isVIP: true,
regTime: new Date(),
hobby: ['吃饭', '睡觉', '打豆豆'],
flag: 1
}
// 过滤器
template.defaults.imports.dateFormat = function (date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
return y + '-' + m + '-' + d //注意，过滤器最后一定要 return 一个值
}
// 4 调用 template 函数
var htmlStr = template('template-web', data)
// 5 渲染HTML结构
$('.content').html(htmlStr)
// 1. 什么是标准语法
// art-template 提供了 {{ }} 这种语法格式，在 {{ }} 内可以进行变量输出，或循环数组等操作，这种{{ }} 语法在art-template中被称为标准语法。
// 2. 标准语法 - 输出
// {{value}}
// {{obj.key}}
// {{obj['key']}}
// {{a ? b : c}}
// {{a || b}}
// {{a + b}}
// 在 {{ }} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。
// 3. 标准语法 – 原文输出
// {{@ value }}
// 如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染。
// 4. 标准语法 – 条件输出
// {{if value}} 按需输出的内容 {{/if}}
// {{if v1}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}
// 5. 标准语法 – 循环输出
// {{each arr}}
// {{$index}} {{$value}}
// {{/each}}
// 如果要实现循环输出，则可以在 {{ }} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前的循环项使用 $value 进行访问。
// 6. 标准语法 – 过滤器
// 过滤器的本质，就是一个 function 处理函数。
// {{value | filterName}}
// 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。
// 定义过滤器的基本语法如下：
// template.defaults.imports.filterName = function(value){/*return处理的结果*/}
// 注意，过滤器最后一定要 return 一个值
</script>
</body>
</html>
|
