arttemplate与webpack的应用

Posted 2020-10-25 dkplus

模板渲染使用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'},
   ]
   }