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

   效果：
  

js模板引擎laytpl的使用的更多相关文章

  1. laytpl js模板引擎

    laytpl js模板引擎.laytpl是一款非常轻量的JavaScript模板引擎.地址:http://www.layui.com/laytpl/ 用法与handlebar.js类似,但是比较轻量级 ...

  2. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  3. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  4. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

  5. 掌握js模板引擎

    最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...

  6. js模板引擎

    js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...

  7. 调研js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  8. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  9. Filter - Surge.js模板引擎过滤器

    版权所有,转载请注明出处:http://guangboo.org/2014/01/05/filter-surgejs-template-engine 过滤器在surge.js模板引擎中多处用到,其类似 ...

随机推荐

  1. IO流实现GBK写入文件然后转换UTF-8

    public static void main(String[] args) throws IOException { File file = new File("olol\\a.txt&q ...

  2. 加入Erlang社区-指引

    国内暂且没有发现较活跃.人气较高的论坛或者社区,偶然发现Erlang官网的Community页面描述了一个Slack交流平台,里面有众多异国他乡的大佬,感兴趣的.有技术疑问的都可以加入看看. 加入教程 ...

  3. 机器学习——最优化问题：拉格朗日乘子法、KKT条件以及对偶问题

    1 前言 拉格朗日乘子法(Lagrange Multiplier)  和 KKT(Karush-Kuhn-Tucker)  条件是求解约束优化问题的重要方法,在有等式约束时使用拉格朗日乘子法,在有不等 ...

  4. 自制计算器 v1.1

    之前的v1.0版本功能还不够完善,这个版本一并做了修改. 代码,每个sub表示哪个按钮做了注释. Dim a, temp, ans As Integer Dim op As String Sub sh ...

  5. Spring框架（第一天）

    一. 引言 a) 什么是Spring框架?(spring官网:www.springsource.org) 3.x  不提供第三发依赖jar 目前已经到了5.x版本. Spring轻量级(代码入侵性小) ...

  6. HCNP Routing&Switching之路由过滤工具Filter-Policy

    前文我们了解了路由控制技术中路由策略和路由匹配工具IP-Prefix相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15314262.html:今天我们 ...

  7. 学习PHP中的信息格式化操作

    在国际化组件的学习过程中,我们已经接触过了 NumberFormatter 这种数字的格式化操作,它可以让我们将数字转换成标准格式.货币.本地语言等形式.今天我们来学习的是另一种专门用于信息格式化的类 ...

  8. TP5关联模型出现疑问,待解决

    一对一: hasOne('关联模型名','外键名','主键名',['模型别名定义'],'join类型'); 说明:其他模型一对一都可以按照手册说明写,但上面代码只能这么写才能执行正确答案, 如果是 / ...

  9. javascript / PHP [Design Patterns - Facade Pattern]

    This pattern involves a single class which provides simplified methods required by client and delega ...

  10. P6800-[模板]Chirp Z-Transform【NTT】

    正题 题目链接:https://www.luogu.com.cn/problem/P6800 题目大意 给出一个\(n\)此多项式\(P\),对于\(k\in[0,m-1]\)所有的求\(P(c^k) ...