二、输出
1. 转义输出
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
- 模板一级特殊变量可以使用
$data
加下标的方式访问:
{{$data['user list']}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>art-template 的语法</title>
</head>
<body>
<ul id="list"></ul>
<!-- 1.引入 art-template -->
<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
<!-- 2.准备好模板 -->
<script id="test" type="text/html">
<li>{{value}}--{{data.key}}--{{data['key']}}</li>
<li>{{a ? b : c}}--{{a || b}}--{{a + b}}</li>
<li><%= value %>--<%= data.key %>--<%= data['key'] %></li>
<li><%= a ? b : c %>--<%= a || b %>--<%= a + b %></li>
<li>{{$data}}</li>
<li>{{$data['user list']}}</li>
</script>
<script>
// 3.获取模板
const tplData = template('test', {
value: 666,
data: { key: 18 },
a: true,
b: false,
c: 'hello',
'user list': '特殊变量'
});
// 4.将模板引擎输出的字符串,传递给DOM元素的innerHTML属性
const list = document.getElementById('list');
list.innerHTML = tplData;
</script>
</body>
</html>
2. 原文输出
- 原文输出语句不会对
HTML
内容进行转义处理,可能存在安全风险,请谨慎使用。 - 标准语法:
-
{{@ value }}
- 原始语法:
-
<%- value %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>art-template 的语法</title>
</head>
<body>
<ul id="list"></ul>
<!-- 1.引入 art-template -->
<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
<!-- 2.准备好模板 -->
<script id="test" type="text/html">
<li>原文输出:{{@value}} <%- value %></li>
<li>转义输出:{{value}}</li>
</script>
<script>
const list = document.getElementById('list');
const tplData = template('test', {
value: '<div>666</div>',
});
list.innerHTML = tplData;
console.log(tplData);
</script>
</body>
</html>
三、条件
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{else}} ... {{/if}}
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } else { %> ... <% } %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>art-template 的语法</title>
</head>
<body>
<ul id="list"></ul>
<!-- 1.引入 art-template -->
<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
<!-- 2.准备好模板 -->
<script id="test" type="text/html">
<li>标准语法:
{{if sex === 'male'}}
男
{{else if sex === 'female'}}
女
{{else}}
其他
{{/if}}
</li>
<li>原始语法:
<%if (sex1 === 'male') { %>
男
<% } else if (sex1 === 'female') { %>
女
<% } else { %>
其他
<% } %>
</li>
</script>
<script>
const list = document.getElementById('list');
const tplData = template('test', {
sex: 'female',
sex1: '666'
});
list.innerHTML = tplData;
</script>
</body>
</html>
四、循环
target
支持 array
与 object
的迭代,其默认值为 $data
。$value
与 $index
可以自定义:{{each target val key}}
。- 标准语法:
{{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" />
<title>art-template 的语法</title>
</head>
<body>
<ul id="list"></ul>
<!-- 1.引入 art-template -->
<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
<!-- 2.准备好模板 -->
<script id="test" type="text/html">
<li>标准语法:
{{each students}}
{{$index}}--{{$value.name}}--{{$value.age}}--{{$value.sex}}
{{/each}}
</li>
<li>原始语法:
<% for(var i = 0; i < students.length; i++){ %>
<%= i %>--<%= students[i].name %>--<%= students[i].age %>--<%= students[i].sex %>
<% } %>
</li>
</script>
<script>
const students = [
{ name: 'Alex', age: 18, sex: 'male' },
{ name: '张三', age: 28, sex: 'male' },
{ name: '李四', age: 20, sex: 'female' }
];
const list = document.getElementById('list');
const tplData = template('test', {students});
list.innerHTML = tplData;
</script>
</body>
</html>
五、子模版
data
数默认值为 $data
;标准语法不支持声明 object
与 array
,只支持引用变量(字符串),而原始语法不受限制。- art-template 内建 HTML 压缩器,请避免书写 HTML 非正常闭合的子模板,否则开启压缩后标签可能会被意外“优化。
- 标准语法:
<!-- 外部导入,填写子模板路径 -->
{{include './header.art'}}
{{include './header.art' data}}
<!-- 内部导入,填写子模版id -->
{{include 'header'}}
{{include 'header' data}}
<!-- 外部导入,填写子模板路径 -->
<% include('./header.art') %>
<% include('./header.art', data) %>
<!-- 内部导入,填写子模版id -->
<% include('header') %>
<% include('header', data) %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>art-template 的语法</title>
</head>
<body>
<ul id="list"></ul>
<!-- 1.引入 art-template -->
<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
<!-- 2.准备好模板 -->
<script id="test" type="text/html">
<!-- 内部导入 -->
<li>标准语法:{{include 'test-strong1' '666'}}</li>
<li>标准语法:<% include('test-strong2', {value:666}) %></li>
</script>
<script id="test-strong1" type="text/html">
<strong>子模版1--{{$data}}</strong>
</script>
<script id="test-strong2" type="text/html">
<strong>子模版2--{{$data.value}}</strong>
</script>
<script>
const list = document.getElementById('list');
const tplData = template('test', {});
list.innerHTML = tplData;
</script>
</body>
</html>