art-template模板引擎的使用
2021-09-06 本文已影响0人
圆滚滚大煤球
传统方式渲染UI
<body>
<div id="titile"></div>
<div>姓名：<span id="name"></span></div>
<div>爱好：<div id="hobby"></div></div>
</body>
<script>
var data = {
name: '笨笨红',
age: 3,
hobby: ['吃肉','睡觉','蹲厕所']
}
$(function(){
$('#name').html(data.name)
var rows = []
$.each(data.hobby,function(i,item){
rows.push('<li>'+ item +'</li>')
})
$('#hobby').html(rows.join(''))
})
</script>
art-template模板引擎渲染ui
1、下载地址：http://aui.github.io/art-template/zh-cn/docs/
2、导入template-web.js和jquery.js
3、准备好要渲染的数据
<script>
// 2.定义要渲染的数据
var data = {
name: '笨笨红',
age: 3,
hobby: ['吃肉','睡觉','蹲厕所'],
test: '<h3>测试原文输出</h3>',
flag: 1
}
// 4.调用template函数
var str = template('tpl-user',data)
console.log(str);
// 5.渲染UI结构
$('#container').html(str)
</script>
4、几种渲染格式
标准语法
原文输出
循环输出
条件输出
<body>
<div id="container"></div>
</body>
<!-- 3.定义模板 -->
<!-- 3.1 模板的html结构必须定义到script中 -->
<script type="text/html" id="tpl-user">
<div>姓名：{{name}}</div>
<div>爱好：
<!-- 循环输出 -->
<ul>
{{each hobby}}
<!-- <li>索引号：{{$index}},循环项：{{$value}}</li> -->
<li>{{$value}}</li>
{{/each}}
</ul>
</div>
<!-- 原文输出 -->
{{@ test}}
<!-- 条件输出 -->
{{if flag === 0}}
flag : 0
{{else if flag === 1}}
flag : 1
{{/if}}
</script>
