art-template模版引擎的基本拼接语法

---

art-template是由腾讯部门开发的一款较为简约轻便的模版引擎，能同时支持在node和浏览器上优化渲染模版速度，支持标准语法和原始语法。

• 官网地址
• npm下载：npm install art-template --save
• 模版引入：<script src="'文件地址'/template-web.js"></script>;
• 需要拼接的模版：const html = template(‘模板路径’，数据);

1.基本使用

<script src="js/template-web.js"></script>
	<script type="text/html" id="tpl">
		<div>
			<span>姓名：{{name}}</span>
			<span>年龄：{{age}}</span>
		</div>
	</script>
	<script>
		var data = {
			name: '李四',
			age: 30
		}
		var html = template('tpl', data);
		document.getElementById('container').innerHTML = html;
	</script>

如果数据携带HTML标签，模版默认不解析，解决方法只需在"{{}}"内加入’@'即可进行原文输出
<span>姓名：{{@ name}}</span>

	name: '<b>李四</b>'

2.条件判断、循环语法

		{{if 条件}}
			<div>输出</div>
		{{else}}
			<div>输出</div>
		{{/if}}

	<script type="text/html" id="tpl">
		<ul>
			{{each data}}
			<li>
				<span>姓名：{{$value.name}}</span>
				<span>年龄：{{$value.age}}</span>
			</li>
			{{/each}}
		</ul>
	</script>
	<script>
		var html = template('tpl', {
			data: [{
				name: '张三',
				age: 33
			}, {
				name: '张四',
				age: 44
			}, {
				name: '张五',
				age: 45
			}]
		});
	</script>

3.导入模版变量配置

• 目标对象：<div>当前时间是：{{$imports.dateFormat(date)}}</div> $imports.变量名
• 导入变量：template.defaults.imports.变量名 = 变量值;

•  	var html = template('tpl', {
   			date: new Date()
   		});
   		function dateFormat(date) {
   			return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
   		}
  

4.子模版导入

• 导入子模块：{{include './header.art'}}
• 导入后可共享子模版资源数据：{{include './header.art' data}}

到此，art-template模版引擎的基本拼接语法结束。

---