《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：
1.22 模板引擎laytpl
laytpl是JavaScript模板引擎，在字符解析上有着比较出色的表现，欠缺之处在于异常调试上。
模块加载名称：laytpl。
在线调试：
http://www.layui.com/demo/laytpl.html
1.22.1 模板的快速使用
与一般的字符拼接不同的是，laytpl模板可与数据分离，集中把逻辑处理放在View层，提升代码可维护性，尤其是针对大量模板渲染的情况。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<script>
var laytpl = layui.laytpl;
//直接解析字符
laytpl('{{ d.name }}是一位公猿').render({
name: '贤心'
}, function(string) {
console.log(string); //贤心是一位公猿
});
//也可以采用下述同步写法，将render方法的回调函数剔除，可直接返回渲染好的字符
var string = laytpl('{{ d.name }}是一位公猿').render({
name: '贤心'
});
console.log(string); //贤心是一位公猿
//如果模板较大，你也可以采用数据的写法，这样会比较直观一些
var string = laytpl([
'{{ d.name }}是一位公猿', '其它字符 {{ d.content }} 其它字符'
].join('')).render({
name: '贤心',
content: 'xyz',
});
console.log(string); //贤心是一位公猿
</script>
</body>
</html>
运行效果如图1-xx所示。
1.22.2 可以将模板存储在页面或其它任意位置
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<!--第一步：编写模版。可以使用一个<script>标签存放模板，示例代码：-->
<script id="demo" type="text/html">
<h3>{{ d.title }}</h3>
<ul>
{{# layui.each(d.list, function(index, item){ }}
<li>
<span>{{ item.modname }}</span>
<span>{{ item.alias }}</span>
<span>{{ item.site || 'site为空' }}</span>
</li>
{{# }); }}
{{# if(d.list.length === 0){ }}
无数据
{{# } }}
</ul>
</script>
<!--第二步：建立视图。用于呈现渲染结果。-->
<div id="view"></div>
<!--第三步：渲染模版-->
<script>
var laytpl = layui.laytpl;
var data = { //数据
"title": "Layui常用模块",
"list": [{
"modname": "弹层",
"alias": "layer",
"site": "layer.layui.com"
}, {
"modname": "表单",
"alias": "form"
}]
}
var getTpl = demo.innerHTML;
var view = document.getElementById('view');
laytpl(getTpl).render(data, function(html) {
view.innerHTML = html;
});
</script>
</body>
</html>
以上代码的执行过程为：data+laytpl模板=最终的html代码。
运行效果如图1-xx所示。
1.22.3 模版语法
模板语法如图1-xx所示。
1.22.3.1 转义{{ d.field }}
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<!--第一步：编写模版。可以使用一个<script>标签存放模板，示例代码：-->
<script id="demo" type="text/html">
<div>
{{ d.htmlCode }}
</div>
</script>
<!--第二步：建立视图。用于呈现渲染结果。-->
<div id="view"></div>
<!--第三步：渲染模版-->
<script>
var laytpl = layui.laytpl;
var data = { //数据
"htmlCode": "<input type='button' value='添加'/>"
}
var getTpl = demo.innerHTML;
var view = document.getElementById('view');
laytpl(getTpl).render(data, function(html) {
view.innerHTML = html;
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.22.3.2 不转义{{= d.field }}
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<!--第一步：编写模版。可以使用一个<script>标签存放模板，示例代码：-->
<script id="demo" type="text/html">
<div>
{{=d.htmlCode}}
</div>
</script>
<!--第二步：建立视图。用于呈现渲染结果。-->
<div id="view"></div>
<!--第三步：渲染模版-->
<script>
var laytpl = layui.laytpl;
var data = { //数据
"htmlCode": "<input type='button' value='添加'/>"
}
var getTpl = demo.innerHTML;
var view = document.getElementById('view');
laytpl(getTpl).render(data, function(html) {
view.innerHTML = html;
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.22.3.3 {{# JavaScript表达式 }}
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<!--第一步：编写模版。可以使用一个<script>标签存放模板，示例代码：-->
<script id="demo" type="text/html">
{{#
var fn = function(){
return '2020-1-1';
};
}}
{{# if(true){ }}
开始日期：{{ fn() }}
{{# } else { }}
已截止
{{# } }}
</script>
<!--第二步：建立视图。用于呈现渲染结果。-->
<div id="view"></div>
<!--第三步：渲染模版-->
<script>
var laytpl = layui.laytpl;
var getTpl = demo.innerHTML;
var data = {};
var view = document.getElementById('view');
laytpl(getTpl).render(data, function(html) {
view.innerHTML = html;
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.22.3.4 {{! template !}}忽略模板代码
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<!--第一步：编写模版。可以使用一个<script>标签存放模板，示例代码：-->
<script id="demo" type="text/html">
{{! d.username !}}
<br/>
{{ d.password }}
</script>
<!--第二步：建立视图。用于呈现渲染结果。-->
<div id="view"></div>
<!--第三步：渲染模版-->
<script>
var laytpl = layui.laytpl;
var getTpl = demo.innerHTML;
var data = {
"usernane": "账号",
"password": "密码"
};
var view = document.getElementById('view');
laytpl(getTpl).render(data, function(html) {
view.innerHTML = html;
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.22.3.5 结合for循环
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<!--第一步：编写模版。可以使用一个<script>标签存放模板，示例代码：-->
<script id="demo" type="text/html">
{{#
for(var i=0;i<d.list.length;i++){ }}
{{d.list[i]}}<br/>
{{# } }}
</script>
<!--第二步：建立视图。用于呈现渲染结果。-->
<div id="view"></div>
<!--第三步：渲染模版-->
<script>
var laytpl = layui.laytpl;
var getTpl = demo.innerHTML;
var data = {
list: ['a', 'b', 'c']
};
var view = document.getElementById('view');
laytpl(getTpl).render(data, function(html) {
view.innerHTML = html;
});
</script>
</body>
</html>
运行效果如图1-xx所示。
扫一扫
3387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
