Layui模板-laytpl

参考地址：

1. Layui官方文档地址；
2. laytpl在线调试地址；

示例：

// 第一步：创建视图标签，用于渲染模板内容
<ul class="demo-ul" id="ulBox"></ul>
// 第二步：编写模版，模板内容存放在script标签内
<script id="ulBoxJs" type="text/html">
	{{# layui.each(d, function (index, item) { }}
		<li class="demo-li">
			<div class="name">
				<a href="{{item.url?item.url:'javascript:void(0);'}}">{{item.name}}</a>
			</div>
			{{# if (item.children) { }}
				<ul class="children">
					{{# layui.each(item.children, function(ind, it){ }}
						<li>
							<a href="{{it.url?it.url:'javascript:void(0);'}}">{{it.name}}</a>			
						</li>
					{{# }); }}
				</ul>
			{{# } }}
		</li>
	{{# }); }}
</script>

// 第三步：渲染模版
const arr = []; // 数据
layui.use('laytpl', function () {
	const laytpl = layui.laytpl;
	const getTpl = ulBoxJs.innerHTML;
	const view = document.getElementById('ulBox');
	laytpl(getTpl).render(arr, function (html) {
		view.innerHTML = html;
	});
})

模版语法

语法	说明	示例
{{ d.field }}	输出一个普通字段，不转义html	<div>{{ d.content }}</div>
{{= d.field }}	输出一个普通字段，并转义html	<h2>{{= d.title }}</h2>
{{# JavaScript表达式 }}	JS 语句。一般用于逻辑处理。用分隔符加 # 号开头。 注意：如果你是想输出一个函数，正确的写法是：{{ fn() }}，而不是：{{# fn() }}	{{# if(true){ }}     表达式为真 {{# } }}
{{! template !}}	对一段指定的模板区域进行过滤，即不解析该区域的模板。注：layui 2.1.6 新增	<div> {{! 这里面的模板不会被解析 !}}</div>

分隔符

如果模版默认的 {{ }} 分隔符与你的其它模板（一般是服务端模板）存在冲突，可以重新定义分隔符：

laytpl.config({
	open: '<%',
	close: '%>'
});
// 分割符将必须采用上述定义的
laytpl([
	'<%# let type = "好"; %>' // JS 表达式,
	'<% d.name %>是一个<% type %>人。'
].join('')).render({
	name: '小明'
}, function(string){
	console.log(string);
	// 打印内容：小明是一个好人
});