在我们实际的开发过程中，可能会遇到使用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>
效果：
