1. laytpl是JavScript模板引擎。与一般的字符拼接不同的是, laytpl的模板可与数据分离, 集中把逻辑处理放在View层, 提升代码可维护性, 尤其是针对大量模板渲染的情况。
2. 模块加载名称: laytpl。
3. 模版语法
4. 分隔符
4.1. 如果模版默认的{ { }}分隔符与你的其它模板存在冲突, 你也可以重新定义分隔符:
laytpl.config({
open: '<%',
close: '%>'
});
// 分割符将必须采用上述定义的
laytpl([
'<%# var type = "公"; %>' // JS表达式
,'<% d.name %>是一位<% type %>猿。'
].join('')).render({
name: '贤心'
}, function(string){
console.log(string); // 贤心是一位公猿
});5. 例子
5.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>模板引擎 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<!-- 第一步: 编写模版。你可以使用一个script标签存放模板, 如: -->
<script id="demo" type="text/html">
<h1>{
{ d.title }}</h1>
<ul>
{
{# layui.each(d.list, function(index, item){ }}
<li>
<span>{
{ item.modname }}</span>
<span>{
{ item.alias }}：</span>
<span>{
{ item.site || '' }}</span>
</li>
{
{# }); }}
{
{# if(d.list.length === 0){ }}
无数据
{
{# } }}
</ul>
</script>
<!-- 第二步: 建立视图。用于呈现渲染结果。 -->
<div id="view"></div>
<script type="text/javascript">
layui.use('laytpl', function(){
var laytpl = layui.laytpl;
// 第三步: 渲染模版
var data = { // 数据
"title": "Layui常用模块"
,"list": [
{"modname": "弹层", "alias": "layer", "site": "http://www.layer.layui.com"},
{"modname": "日期与时间", "alias": "form", "site": "http://www.layui.com/laydate"}
]
};
var getTpl = demo.innerHTML
,view = document.getElementById('view');
laytpl(getTpl).render(data, function(html){
view.innerHTML = html;
});
});
</script>
</body>
</html>5.2. 效果图
