关于artTemplate的使用初探

artTemplate的优势不再赘述，填充数据时候还是非常实用的。谈一下使用中碰到的问题，因为之前没有使用过，有踩坑经历，这里做下备忘。

网上能找到的demo，大都来源于git上的源码示例https://github.com/aui/art-template

但其中并无关于匿名数组遍历的问题，即数据类型都要求json格式：｛name：数组｝，

如：

var data = {
	list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};

实际使用时候，返回数据的接口直接返回了一个数组

['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']

自行命名拼装比较麻烦，就研究了下能否直接使用匿名数组，经验证是可以的，示例如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="./template-web.js"></script>
</head>

<body>
<div id="content"></div>
<script id="test_original" type="text/html">
test_original示例
<ul>
    {{each list value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>
</script>
<script id="test_simplify" type="text/html">
test_simplify示例(即test_original的语法简化版)
<ul>
    {{each list}}
        <li>索引{{$index}} ：{{$value}}</li>
    {{/each}}
</ul>
</script>
<script id="test_anonymous" type="text/html">
test_anonymous示例
<ul>
    {{each $data}}
        <li>索引{{$index}} ：{{$value}}</li>
    {{/each}}
</ul>
</script>

<script>
var data = {
	list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var data_anonymous = ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'];

//var html = template('test_original', data);
//var html = template('test_simplify', data);
var html = template('test_anonymous', data_anonymous);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

如果是对象数组，使用对象属性，可以使用如：

{{$value.name}}

需要注意的是，匿名使用时

{{each $data}}   {{$index}}  {{$value}}

是固定的，尤其是{{each $data}}中的data不随template('test_anonymous', data_anonymous)第二个参数名变化而变化

代码示例下载地址：https://download.csdn.net/download/shujudeliu/10297917

关于artTemplate的使用初探

猜你喜欢