模板渲染使用arttemplate,使用方法如下:
- 普通使用
普通使用把渲染模板写在<script>
标签里面,引入arttemplate.js,从服务端接收数据(数组与对象的形式),然后调用arttemplate提供的方法渲染。例如,可以直接调用template()方法(需要获取html标签的id);或者使用complie()先编译模板,然后再传入数据;或者使用render()方法直接编译并传入数据。生成的html内容直接赋值到一个变量html,然后通过innerHTML方法把html内容写进去。 - webpack
和普通使用一样,但是模板单独写在.tpl
文件,然后require()进来,用complie()方法编译成函数,再传入从服务端传来的对象和数组。同时安装ejs-loader
,用于识别.tpl
后缀的文件。
模板写法如下:
- 模板tpl
{{each data as item index}}
<div class='item'>
<h1>{{item.title}}</h1>
<li>{{index}}.{{item.name}}</li>
</div>
{{/each}}
- 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);
- 数据data
{
content: [
{title: 'hello', name: 'dk'},
{title: 'hi', name: 'bl'},
{title: 'hey', name: 'gy'},
]
}