artTemplate的常用方法
在没接触artTemplate之前，我都是手写字符串拼接做模板替换。这样做往往费时费力，而当我使用了artTemplate之后，只需要两句话，就搞定了全部！通过长期的使用artTemplate，现在我为大家总结出其最全的常用方法。
参考资料：https://github.com/aui/artTemplate
以上是官方文档以及下载地址。
一：安装使用
下载artTemplate后，找到template.js，引入到页面即可
引入代码：
<script type="text/javascript" src="artTemplate/dist/template.js">script>- 1
- 1
二：最基本的使用方法
官方给出的小demo就是最基本的使用方法：
<html>
<head>
<meta charset="UTF-8">
<title>basic-demotitle>
<script src="../dist/template.js">script>
head>
<body>
<div id="content">div>
<script id="test" type="text/html">
{{if isAdmin}}
{{title}}</h1>
{{each list as value i}}
索引 {{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
- 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- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 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
- 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
- 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
- 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
- 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}}
<td>{{value.name}}</td>
{{each value.identity as v}}
{{each v.id_type as vi}}
{{vi.name}}</td>
{{/each}}
{{v.id}}</td>
{{/each}}
{{value.phone}}</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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
只要理解template里每个参数，变量的含义，我们就能灵活运用这个优秀的模板替换工具了，相信看完我写的博客后，对大家有帮助。
下面是利用teplate.js做的一道面试题，主要是数组嵌套问题：
<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>编号：111h2>
<p>姓名：<span id="name">张三span>p>
<p>证件类型：<span id="iden">张三span>p>
<p>证件号：1111p>
<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}}
<td>{{value.name}}</td>
{{each value.identity as v}}
{{each v.id_type as vi}}
{{vi.name}}</td>
{{/each}}
{{v.id}}</td>
{{/each}}
{{value.phone}}</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>
你可能感兴趣的:(前端工程师)