《layui宇宙版教程》：模板引擎laytpl

《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>

</head>

<body>

var laytpl = layui.laytpl;

//直接解析字符

laytpl('{{ d.name }}是一位公猿').render({

}, function(string) {

console.log(string); //贤心是一位公猿

});

//也可以采用下述同步写法，将render方法的回调函数剔除，可直接返回渲染好的字符

var string = laytpl('{{ d.name }}是一位公猿').render({

});

console.log(string); //贤心是一位公猿

//如果模板较大，你也可以采用数据的写法，这样会比较直观一些

var string = laytpl([

'{{ d.name }}是一位公猿', '其它字符 {{ d.content }} 其它字符'

].join('')).render({

content: 'xyz',

});

console.log(string); //贤心是一位公猿

</script>

</body>

</html>

运行效果如图1-xx所示。

1.22.2 可以将模板存储在页面或其它任意位置

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<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>

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>

</head>

<body>

<div>

</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>

</head>

<body>

<div>

</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>

</head>

<body>

{{#

var fn = function(){

return '2020-1-1';

};

}}

{{# if(true){ }}

开始日期：{{ fn() }}

{{# } else { }}

已截止

{{# } }}

</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>

</head>

<body>

<br/>

</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>

</head>

<body>

{{#

for(var i=0;i<d.list.length;i++){ }}

{{d.list[i]}}<br/>

{{# } }}

</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所示。

《layui宇宙版教程》：模板引擎laytpl相关推荐

《layui宇宙版教程》：字体图标
<Layui宇宙版教程>提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入: 1.5 字体图标 Layui的所有图标全部采用字体形式,取材于阿 ...
《layui宇宙版教程》：扫描二维码加2000人QQ群交流学习
Layui宇宙版教程 version1.6 <Layui宇宙版教程>提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入: 任职公司中大部分的软 ...
《layui宇宙版教程》：日期和时间组件laydate
<Layui宇宙版教程>提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入: 1.19 日期和时间组件laydate 主要以年选择器.年月选择 ...
《layui宇宙版教程》：轮播组件carousel
<Layui宇宙版教程>提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入: 1.30 轮播组件carousel carousel主要适用于跑 ...
《layui宇宙版教程》：徽章
<Layui宇宙版教程>提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入: 1.14 徽章徽章是一个修饰性的元素,它们本身细小而并不显眼, ...
写一个迷你版Smarty模板引擎，对认识模板引擎原理非常好（附代码）
前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是 ...
smarty.class.php,自定义min版smarty模板引擎MinSmarty.class.php文件及用法
本文实例讲述了自定义的min版smarty模板引擎MinSmarty.class.php文件.分享给大家供大家参考,具体如下: 一.smarty的优点 smarty是一个使用PHP写出来的模板引擎,是 ...
layui模板引擎laytpl判断为null或为空
<script type="text/html" id="stu_nameTpl">{{# if(d.stu_name==null || d.stu ...
Enjoy模板里使用layui模板引擎laytpl
注:https://jfinal.com/share/1023

《layui宇宙版教程》：模板引擎laytpl

《layui宇宙版教程》：模板引擎laytpl相关推荐

最新文章

热门文章