JS模板引擎-腾讯artTemplate 最全的使用介绍
在没接触artTemplate之前,我都是手写字符串拼接做模板替换。这样做往往费时费力,而当我使用了artTemplate之后,只需要两句话,就搞定了全部!通过长期的使用artTemplate,现在我为大家总结出其最全的常用方法。参考资料:https://github.com/aui/artTemplate以上是官方文档以及下载地址。一:安装使用下载artTemplate后,找到t...
在没接触artTemplate之前,我都是手写字符串拼接做模板替换。这样做往往费时费力,而当我使用了artTemplate之后,只需要两句话,就搞定了全部!通过长期的使用artTemplate,现在我为大家总结出其最全的常用方法。
参考资料:https://github.com/aui/artTemplate
以上是官方文档以及下载地址。
一:安装使用
下载artTemplate后,找到template.js,引入到页面即可
引入代码:
<script type="text/javascript" src="artTemplate/dist/template.js"></script>
- 1
二:最基本的使用方法
官方给出的小demo就是最基本的使用方法:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} :{{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>
<script>
var data = {
title: '基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>
- 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
效果展示:
其实上诉例子给出的写法并不是唯一的写法,还有原生的写法和不重新命名的写法
原生写法:
<%if (admin){%>
<%include('admin_content')%>
<%for (var i=0;i<list.length;i++) {%>
<div><%=i%>. <%=list[i].user%></div>
<%}%>
<%}%>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
不重新命名的写法:
{{if admin}}
{{include 'admin_content'}}
{{each list}}
<div>{{$index}}. {{$value.user}}</div>
{{/each}}
{{/if}}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
总结,原生写法太过麻烦,不需要深究,推荐使用简易写法,我们可以使用{{each list as value i}},
为每一项和其序号重新命名成value,i。这样,在后面只需要使用value和i即可。我们也可以不重新命名,直接使用{{each list}},但这样的话,后面的需要使用$加index和value。
三:引入模板页的写法
上诉的基本写法,是将模板写在页面内的,但是我们在实际开发中,一般不会将模板和js写在页面内,所以,我们会单独写一个模板页,并将其引入到页面内,进行模板替换,如果是这样的话,我们就需要对调用template的方法进行一些小小的调整,具体如下:
1.构建模板页
2.模板页代码
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} :{{value}}</li>
{{/each}}
</ul>
{{/if}}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
3.进行模板替换
由于模板是单独写在一个页面的,所以我们需要ajax的get方法获取到模板页,然后在进行模板替换。
<script>
var obj = {
title: '模板页获取例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html=$.get('list-template.html',function (data) {
var render = template.compile(data);
var str = render(obj);
document.getElementById('content').innerHTML = str;
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
这里,我使用的是jquery的get方法获取模板页,然后再利用template.compile()获取渲染内容,然后将数据obj渲染进去,最后添加到页面里即可。
注意:这时候就不能使用template()方法进行模板替换了,必须使用template.compile()及render()进行模板替换才行。
四:复杂数据(数组嵌套)的模板写法
在上诉例子中,我们都是使用了简单的数组进行数据替换,但是在实际开发中,后台给我们的数据可能不仅仅是一个数组那么简单,我们会遇到数组里嵌套对象数组这样的数据,那这样的数据该如何进行模板替换呢?下面我们来一起看一下:
数据形如:
inputData = {
"flag": true,
"orderArray": [{
"id": "1",
"name": "张三", //用户名
"identity": [ //证件类型
{
"id_type": [{
"id": 1,
"name": "身份证"
}],
"id": "110105199408286510"
}
],
"phone": "15210329866", //手机号
"date_of_birth": "19940828", //出声日期
"address": "北京", //地址
}, {
"id": "2",
"name": "赵四",
"identity": [{
"id_type": [{
"id": 1,
"name": "身份证"
}],
"id": "110105199508286510"
}],
"phone": "15210329877",
"date_of_birth": "19950828",
"address": "北京",
}, {
"id": "3",
"name": "王五",
"identity": [{
"id_type": [{
"id": 2,
"name": "护照"
}],
"id": "G49331247"
}],
"phone": "15210329877",
"date_of_birth": "20010124",
"address": "上海",
}]
};
- 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
我们可以看到在inputData下有一个orderArray的对象数组,而在orderArray下还有identity,identity下还有id_type。如果我们需要使用id_type里的数据进行模板替换。那么我们只需要进行多次each循环数组即可。
具体操作如下:
<script type="text/html" id="test">
{{if flag}}
{{each orderArray as value}}
<tr>
<td>{{value.name}}</td>
{{each value.identity as v}}
{{each v.id_type as vi}}
<td>{{vi.name}}</td>
{{/each}}
<td>{{v.id}}</td>
{{/each}}
<td>{{value.phone}}</td>
<td>{{value.date_of_birth}}</td>
</tr>
{{/each}}
{{/if}}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
只要理解template里每个参数,变量的含义,我们就能灵活运用这个优秀的模板替换工具了,相信看完我写的博客后,对大家有帮助。
下面是利用teplate.js做的一道面试题,主要是数组嵌套问题:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
</style>
</head>
<body>
<table border="1px solid #ccc" style="border-collapse:collapse;" id="table">
<tr>
<th>姓名</th>
<th>证件类型</th>
<th>证件号</th>
<th>手机号</th>
<th>出生日期</th>
</tr>
<tbody id="content">
</tbody>
</table>
<div id="info" style="border: 1px solid #ccc; text-align: center; display: none;">
<h2>编号:111</h2>
<p>姓名:<span id="name">张三</span></p>
<p>证件类型:<span id="iden">张三</span></p>
<p>证件号:1111</p>
<p>手机号:<span id="phone">张三</span></p>
<p>出生日期:<span id="add">张三</span></p>
<p>所在地:北京</p>
<p> <span>取消</span> <span id="btn">确定</span></p>
</div>
</body>
<script type="text/html" id="test">
{{if flag}}
{{each orderArray as value}}
<tr>
<td>{{value.name}}</td>
{{each value.identity as v}}
{{each v.id_type as vi}}
<td>{{vi.name}}</td>
{{/each}}
<td>{{v.id}}</td>
{{/each}}
<td>{{value.phone}}</td>
<td>{{value.date_of_birth}}</td>
</tr>
{{/each}}
{{/if}}
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<script>
var inputData;
function getTestData() {
inputData = {
"flag": true,
"orderArray": [{
"id": "1",
"name": "张三", //用户名
"identity": [ //证件类型
{
"id_type": [{
"id": 1,
"name": "身份证"
}],
"id": "110105199408286510"
}
],
"phone": "15210329866", //手机号
"date_of_birth": "19940828", //出声日期
"address": "北京", //地址
}, {
"id": "2",
"name": "赵四",
"identity": [{
"id_type": [{
"id": 1,
"name": "身份证"
}],
"id": "110105199508286510"
}],
"phone": "15210329877",
"date_of_birth": "19950828",
"address": "北京",
}, {
"id": "3",
"name": "王五",
"identity": [{
"id_type": [{
"id": 2,
"name": "护照"
}],
"id": "G49331247"
}],
"phone": "15210329877",
"date_of_birth": "20010124",
"address": "上海",
}]
};
var html = template('test', inputData);
document.getElementById('content').innerHTML = html;
}
function clicked(id){
var o, i;
o = document.getElementById(id).rows;//表格所有行
for(i = 0; i < o.length; i++){
o[i].ondblclick = function(){ //设置事件
var oo,op,oq,or;
oo = this.cells[0];
op = this.cells[1];
oq = this.cells[3];
or = this.cells[4];
// alert(oo)
document.getElementById('name').innerHTML=oo.innerHTML;
document.getElementById('iden').innerHTML=op.innerHTML;
document.getElementById('phone').innerHTML=oq.innerHTML;
document.getElementById('add').innerHTML=or.innerHTML;
document.getElementById('info').style.display='block';
document.getElementById('btn').onclick=function () {
document.getElementById('info').style.display='none';
}
}
}
}
getTestData();
clicked('table')
</script>
</html>
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)