js模板引擎laytpl的使用

huan1993

浏览: 411542 次
性别:
来自: 湖北

最近访客更多访客>>

caokuang_0

bbls

抛出异常的爱

sosoab

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

模板引擎

js前端模板引擎 laytpl

在我们实际的开发过程中，可能会遇到使用ajax去后台获取一堆的数据，然后动态的渲染到页面上。比如：去后台获取一个list集合，然后将数据以表格的形式展示在页面上。另外一种可能发生的情况就是页面上需要批量增加数据信息等等。如果我们前台使用html动态的拼接的话，不利于后期的维护，而且也不利于阅读。因此就需要一个前台模板引擎帮我们解决这个问题。

laytpl是一个前端模板引擎，可以解决我们上面遇到的问题，并且使用简单，开发方便，模板渲染的效率也高。

laytpl官方网址: http://laytpl.layui.com/

一、laytpl的语法简单使用：

{{ d.field }}	输出文本，不转义html
{{= d.field }}	输出文本，转义html
{{# if(条件){ }} ...{{# }else{ }}...{{# } }}	if else的写法
{{# for(循环的内容) { }}....{{# } }}	for循环的写法

二、基于上方语法的一个小例子

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本使用</title>
		<script type="text/javascript" src="../js/laytpl.js"></script>
	</head>
	<body>
		<!-- 1.编写模板 -->
		<script type="text/html" id="template">
			<h3> hello {{ d.world }} </h3>
			<h3> 你好: {{= d.redWorld }} </h3>
			<h3> if条件的使用 {{# if(d.sex=='0') {}} 男 {{# }else { }} 女 {{# } }}</h3>
			<h3> for循环的使用: </h3>
			<ul>
				{{# var num = 1;}}
				{{# for(var i=0;i<d.datas.length;i++){}}
					<li> {{d.datas[i].title}} -- {{num++}}</li>
				{{#}}}
			</ul>
		</script>
		
		<!-- 2.定义输出的视图 -->
		<div id="outputView"></div>
		
		<!-- 3.渲染模版 -->
		<script type="text/javascript">
			var data = {
				world : '<span style="color:red"> word </span>',
				redWorld : '<span style="color:red"> word </span>',
				sex : '1',
				datas : [{title:'文章一'},{title:'文章二'},{title:'文章三'},{title:'文章四'}]
			};
			laytpl(getById('template').innerHTML).render(data, function(html){
				getById('outputView').innerHTML = html;
			});
			
			function getById(id){
				return document.getElementById(id);
			}
		</script>
	</body>
</html>

输出结果：

三、实现一个动态增加行和删除行的例子(模拟页面上的批量增加数据的操作)

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本使用</title>
		<script type="text/javascript" src="../js/laytpl.js"></script>
		<style type="text/css">table,tr,td,th,thead,tbody{border-collapse: collapse;}</style>
	</head>
	<body>
		<!-- 1.编写模板 -->
		<script type="text/html" id="template">
			<tr>
				<td> <input type="text" name="username"/> </td>
				<td> 男:<input type="radio" name="sex" value="0"/> 女:<input type="radio" name="sex" value="1"/> </td>
				<td> <input type="text" name="age" value="{{d.age}}"/> </td>
				<td> <input type="button" value=" + " onclick="add(this)" /> <input type="button" value=" - " onclick="removeTr(this)" /> </td>
			</tr>
		</script>
		<!-- 2.定义输出的视图 -->
		<table border="1">
			<thead>
				<tr>
					<th>用户名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="outputView">
			</tbody>
		</table>
		<!-- 3.渲染模版 -->
		<script type="text/javascript">
			function loadTemplate(age){
				laytpl(getById('template').innerHTML).render({ age : age || 20 }, function(html){
					getById('outputView').innerHTML += html;
				});	
			}
			loadTemplate();
			function add($this){
				loadTemplate( Math.round(Math.random()*100) );
			}
			function removeTr($this){
				$this.parentNode.parentNode.remove();
			}
			function getById(id){
				return document.getElementById(id);
			}
		</script>
	</body>
</html>

效果：