art-template
输出
标准语法
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
原始语法
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
基本案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试art-template</title>
</head>
<body>
<div id="user-cont"></div>
<script id="user-tpl" type="text/html">
<h2>{{ name }}</h2>
{{$data}}
</script>
</body>
<script src="./lib/template-web.js"></script>
<script>
let data = {
name: '姓名',
};
let html = template('user-tpl', data);
document.getElementById('user-cont').innerHTML = html;
</script>
</html>
原文输出
原文输出语句不会对 HTML 内容进行转义处理，可能存在安全风险，请谨慎使用。
标准语法
{{@ value }}
原始语法
<%- value %>
基本案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试art-template</title>
</head>
<body>
<div id="user-cont"></div>
<script id="user-tpl" type="text/html">
{{if user.is_show}}
<h2>{{@ user.name }}</h2>
{{each user.child}}
<p>孩子{{$index + 1}}:{{$value}}</p>
{{/each}}
{{/if}}
{{$data}}
</script>
</body>
<script src="./lib/template-web.js"></script>
<script>
let data = {
user: {
is_show: true,
name: '<span style="color:red;">张三</span>',
child: ['大毛','二毛','三毛']
}
};
let html = template('user-tpl', data);
document.getElementById('user-cont').innerHTML = html;
</script>
</html>
条件判断
标准语法
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
原始语法
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
基本案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试art-template</title>
</head>
<body>
<div id="user-cont"></div>
<script id="user-tpl" type="text/html">
{{if user.is_show}}
<h2>{{ user.name }}</h2>
{{/if}}
{{$data}}
</script>
</body>
<script src="./lib/template-web.js"></script>
<script>
let data = {
user: {
name: '姓名',
is_show: false,
}
};
let html = template('user-tpl', data);
document.getElementById('user-cont').innerHTML = html;
</script>
</html>
循环
标准语法
{{each target}}
{{$index}} {{$value}}
{{/each}}
原始语法
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
基本案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试art-template</title>
</head>
<body>
<div id="user-cont"></div>
<script id="user-tpl" type="text/html">
{{if user.is_show}}
<h2>{{ user.name }}</h2>
{{each user.child}}
<p>孩子{{$index + 1}}:{{$value}}</p>
{{/each}}
{{/if}}
{{$data}}
</script>
</body>
<script src="./lib/template-web.js"></script>
<script>
let data = {
user: {
is_show: true,
name: '张三',
child: ['大毛','二毛','三毛']
}
};
let html = template('user-tpl', data);
document.getElementById('user-cont').innerHTML = html;
</script>
</html>
赋值
标准语法
{{set temp = data.sub.content}}
原始语法
<% var temp = data.sub.content; %>
基本案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试art-template</title>
</head>
<body>
<div id="user-cont"></div>
<script id="user-tpl" type="text/html">
{{set date = '2019-03-18'}}
<p>日期:{{date}}</p>
</script>
</body>
<script src="./lib/template-web.js"></script>
<script>
let html = template('user-tpl',{});
document.getElementById('user-cont').innerHTML = html;
</script>
</html>