art-template模板应用

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script src="jquery.min.js"></script>
 7     <script src="art-template.js"></script>
 8 
 9 
10 </head>
11 <body>
12 
13 <!--页面内容区-->
14 <div id="content"></div>
15 
16 
17 <!--处理区-->
18 <script id="test" type="text/html">
19     <h1>{{title}}</h1>
20     <ul>
21         {{each list as value i}}
22         <li>索引 {{i + 1}} ：{{value}}</li>
23         {{/each}}
24     </ul>
25 
26 </script>
27 
28 
29 <script>
30     var data = {
31         title: '基本例子',
32         list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
33     };
34     var html = template('test', data);//渲染到处理区
35     document.getElementById('content').innerHTML = html;//渲染到页面内容区
36 
37 </script>
38 
39 </body>
40 </html>

　　　　结果如下：

art-template.js下载地址：https://raw.githubusercontent.com/aui/art-template/master/lib/template-web.js
官网文档：https://aui.github.io/art-template/zh-cn/docs/installation.html