art-template客户端基础语法
template 使用
https://aui.github.io/art-template/zh-cn/docs/installation.html
模板渲染
<!-- 引入第三方库 -->
<script src="/template.js"></script>
<!-- 每一个模板都要有不同的id type属性是为了显示语法高亮 -->
<script type="text/html" id="tpl">
<span>{{@ name}}</span>
<span>{{age}}</span>
</script>
<script>
// 渲染模板
var body = document.querySelector('body')
var html = template('tpl', {
name: '<b>zs</b>',
age: 23
})
body.innerHTML = html
</script>
模板语法
原文输出
如果数据中携带 HTML 标签, 默认情况下 , 模板引擎不会解析标签 , 会将其转义后原文输出
<h2>{{@ name}}</h2>
条件判断
{{if 条件}}... {{else}}...{{/if}}
{{if 条件}}... {{else if 条件}}...{{/if}}
{{if age > 18}}
<div>age 大于 18</div>
{{else if age == 17}}
<div>age == 17</div>
{{else}}
<div>age 小于 15</div>
{{/if}}
循环
{{each data}}
{{$value}} {{$index}}
{{/each}}
<script type="text/html" id="tpl">
<ul>
{{each data}}
<li>
<span>{{$value.name}}</span>
<span>{{$value.age}}</span>
</li>
{{/each}}
</ul>
</script>
<script>
var body = document.querySelector('body')
var html = template('tpl', {data: [{name: 'zs', age: 23}, {name: 'ls', age: 33}]})
body.innerHTML = html
</script>
导入模板变量
允许访问 javascript 中定义的变量
// 工具函数在 非全局作用域
<script src="./template-web.js"></script>
<script type="text/html" id="tpl">
<div>{{$imports.dateFormat(time)}}</div>
</script>
<script>
window.addEventListener('load', function () {
var container = document.querySelector('.container')
// 非全局作用域需要使用 下面语法手动导入原生方法
template.defaults.imports.dateFormat = dateFormat
var html = template('tpl', {time: new Date()})
// 时间格式化
function dateFormat(date) {
return `${date.getFullYear()}日${date.getMonth() + 1}月${date.getDate()}日`
}
container.innerHTML = html
})
</script>
// 工具函数在 全局作用域
<script src="./template-web.js"></script>
<script type="text/html" id="tpl">
<div>{{$imports.dateFormat(time)}}</div>
</script>
<script>
var container = document.querySelector('.container')
var html = template('tpl', {time: new Date()})
function dateFormat(date) {
return `${date.getFullYear()}日${date.getMonth() + 1}月${date.getDate()}日`
}
container.innerHTML = html
</script>