014-模板引擎

最新推荐文章于 2023-02-07 15:03:31 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-02-07 15:03:31 发布

阅读量258

点赞数

分类专栏： layui学习文章标签： laytpl JavaScript 模板引擎渲染视图层

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/113032804

版权

layui学习专栏收录该内容

32 篇文章

订阅专栏

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. 效果图