d
k
p
l
u
s

arttemplate与webpack的应用

模板渲染使用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}}
  1. 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);
  1. 数据data
{
    content: [
        {title: 'hello', name: 'dk'},
        {title: 'hi', name: 'bl'},
        {title: 'hey', name: 'gy'},
    ]
}
posted @ 2018-02-27 11:51  dkplus  阅读(1583)  评论(0编辑  收藏  举报