在我们实际的开发过程中，可能会遇到使用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. 快速搭建SSM基本项目

    快速搭建SSM项目基本手脚架 Maven构建项目 一般我们使用Maven来管理我们的项目: 导入相关依赖配置pom.xml: <?xml version="1.0" enco ...

  2. 2021.9.12周六PAT甲级考试复盘与总结

    周六PAT甲级考试复盘与总结 先说结论:仍未步入"高手"行列:现在的学习节奏与方法是对的,有十万分的必要坚持下去. 题目 知识点 分数 T1 前缀和.二分 11 / 20 T2 排 ...

  3. TCL、华星光电和中环股份，如何在一条生态链上领跑？

    聚众智.汇众力.采众长. "我们决心用五年时间,将TCL科技和TCL实业做到真正的世界500强,将智能终端.半导体显示.半导体光伏三大核心产业力争做到全球领先,将半导体材料等其他产业做到中国 ...

  4. docker 搭建 zipkin

    1.拉镜像 docker pull openzipkin/zipkin 2.运行镜像 docker run -d --restart always -p 9411:9411 --name zipkin ...

  5. Python新手的奇技淫巧，掌握在手的充实感

    以下是我长久以来收集的一些Python实用技巧和工具,希望能对刚学习Python的新手有所帮助.  1.交换变量 x = 6 y = 5 x, y = y, x print x >>> ...

  6. Docker系类（25）- 发布镜像到DockerHub

    # step-1 注册账号 https://hub.docker.com/# step-2 在服务器尚提交我们的镜像[root@localhost WEB-INF]# docker login --h ...

  7. http报文常见的请求头、响应头

    http报文常见的请求头 1.Accept Accept: text/html  浏览器可以接受服务器回发的类型为 text/html. Accept: /   代表浏览器可以处理所有类型,(一般浏览 ...

  8. hdu5909-Tree Cutting【FWT】

    正题 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5909 题目大意 给出\(n\)和\(m\)(\(m=2^k\)).再给出一个大小为\(n\)的树 ...

  9. 5分钟实现用docker搭建Redis集群模式和哨兵模式

    如果让你为开发.测试环境分别搭一套哨兵和集群模式的redis,你最快需要多久,或许你需要一天?2小时?事实是可以更短. 是的,你已经猜到了,用docker部署,真的只需要十几分钟. 一.准备工作 拉取 ...

  10. Python isinstance() 函数 Python 内置函数 Python 内置函数

    描述 isinstance() 函数来判断一个对象是否是一个已知的类型,类似 type(). isinstance() 与 type() 区别: type() 不会认为子类是一种父类类型,不考虑继承关 ...