模板渲染使用arttemplate，使用方法如下：

1. 普通使用
   普通使用把渲染模板寫在<script>標簽裏面，引入arttemplate.js，從服務端接收數據（數組與對象的形式），然後調用arttemplate提供的方法渲染。例如，可以直接調用template()方法（需要獲取html標簽的id）；或者使用complie()先編譯模板，然後再傳入數據；或者使用render()方法直接編譯並傳入數據。生成的html內容直接賦值到一個變量html，然後通過innerHTML方法把html內容寫進去。
2. webpack
   和普通使用一樣，但是模板單獨寫在.tpl文件，然後require()進來，用complie()方法編譯成函數，再傳入從服務端傳來的對象和數組。同時安裝ejs-loader
   ，用於識別.tpl後綴的文件。

模板寫法如下：

1. 模板tpl

   {{each data as item index}}
   <div class='item'>
   <h1>{{item.title}}</h1>
   <li>{{index}}.{{item.name}}</li>
   </div>
   {{/each}}

2. js渲染函數

   //data是服務端傳來的數據
   function htmlRender(data) {
   var tpl = require('index.tpl')();
   var render = artT
    
   .compile(tpl);//render被編譯成一個函數了
   
   var obj = {
       data: data//第一個data是模板tpl對應的data（each ‘data’），第二個data是傳入的數據
   }
   var html = render(obj);
   $('items').html(html);
   }
   htmlRender(data.content);

3. 數據data

   {
   content: [
       {title: 'hello', name: 'dk'},
       {title: 'hi', name: 'bl'
    
   },
       {title: 'hey', name: 'gy'},
   ]
   }

arttemplate與webpack的應用