artTemplate基本使用方法

秒速五厘米 2021-09-14 09:48 427阅读 0赞

一.方法

1.template(id1, data)用script标签来展示  
根据 id1 渲染模板。内部会根据document.getElementById(id2)查找模板。  
如果没有 data 参数，那么将返回一渲染函数。

var html = template('test', data);  
document.getElementById('content').innerHTML = html;  
  
  
2.template.compile(source, options)将渲染模板用javascript拼接实现  
将返回一个渲染函数。  
    var render = template.compile(data);  //data是模板，，用$.get获取  
    var str = render(obj);  
    document.getElementById('content').innerHTML = str;

二.例子

(一).用`type="text/html"`的`script`标签存放模板

注意：

1.必须给script标签定义id，而且只能是id，不能是class。

因为在使用template(id,data)方法的时候，该方法会根据id渲染模板，引擎内部会根据`document.getElementById(id)`查找模板。如果使用class作为参数，artTemplate引擎会报错。如果没有 data 参数，将返回一渲染函数。

2.在<!DOCTYPE html>script标签中的type类型默认为type/javascript。在script标签中，必须重新声明type类型为text/html，否则会没有效果。

<!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>

![20171121180441786][]

(二).引入模板页的写法

1.构建模板页 :template-me.html

{ {if isAdmin}} <h1>{ {title}}</h1> <ul class="oo"> { {each list as value i}} <li >索引 { {i + 1}} ：{ {value}}</li> { {/each}} </ul> { {/if}}

2.进行模板替换   
由于模板是单独写在一个页面的，所以我们需要ajax的get方法获取到模板页，然后在进行模板替换。

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>compile-demo</title> <script src="../../dist/jQuery-2.1.4.min.js"></script> <script src="../../dist/template.js"></script> </head> <body> <div id="content"></div> <script type="text/javascript"> $(function () { var obj = { title: '模板页获取例子', isAdmin: true, list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; var html=$.get('template-me.html',function (data) { var render = template.compile(data); var str = render(obj); document.getElementById('content').innerHTML = str; }) }); </script> </body> </html>

这里，我使用的是[jQuery][]的get方法获取模板页，然后再利用template.compile()获取渲染内容，然后将数据obj渲染进去，最后添加到页面里即可。

注意：这时候就不能使用template()方法进行模板替换了，必须使用template.compile()及render()进行模板替换才行。

![20171121195214760][]

(三).复杂数据（数组嵌套）的模板写法

1.表格的模板

inputData下有一个orderArray的对象数组，而在orderArray下还有identity，identity下还有id\_type。如果我们需要使用id\_type里的数据进行模板替换。那么我们只需要进行多次each循环数组即可。

<!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> <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 src="../dist/jQuery-2.1.4.min.js"></script> <script src="../dist/template.js"></script> <script> var inputData; //模板引擎使用 function getTestData() { // inputData数据 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').οnclick=function () { document.getElementById('info').style.display='none'; } } } } getTestData(); clicked('table') </script> </body> </html>

![20171122135657225][]

[20171121180441786]: /images/20210813/31698db9752a4a5e834fd751804faebc.png
[jQuery]: http://lib.csdn.net/base/jquery
[20171121195214760]: /images/20210813/76088ce5ad06498da477b1467f6bfafb.png
[20171122135657225]: /images/20210813/097b8e9189c042d0a9b4fe62c4f26031.png