在我们实际的开发过程中，可能会遇到使用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. TCP超时重传、序列号、滑动窗口简介

    文章目录 12 TCP:传输控制协议(初步) 12.1 引言 12.1.1 ARQ和重传 12.1.2 分组窗口和滑动窗口 12.1.3 变量窗口:流量控制和拥塞控制 12.1.4 变量窗口:设置重传 ...

  2. FTP协议简介

    1. FTP协议概述 FTP协议的英文全称为File Transfer Protocol, 简称为FTP, 它是从一个主机向一个主机传输文件的协议. FTP协议中客户端和服务器进行文件交互的方式如下图 ...

  3. Vue Abp vNext获取当前登录用户

    系统默认提供了获取当前用户的api方法 https://localhost:44364/api/identity/my-profile 手工实现方法:abp后台获取当前用户需要在AppService应 ...

  4. 分布式必备理论基础：CAP和BASE

    大家好,我是老三,今天是没有刷题的一天,心情愉悦,给大家分享两个简单的知识点:分布式理论中的CAP和BASE. CAP理论 什么是CAP CAP原则又称CAP定理,指的是在一个分布式系统中,Consi ...

  5. Java集合：HashMap

    Hashmap是一个存储key-value的映射表. 优点: 索引数据快,查找一个数据对的时间复杂度是O(1) 增加.删除一个数据的时间复杂度是O(1) key不能重复,可以存储一个null值 存储: ...

  6. 第一次用AngularJS

    1.创建指令的4种方式(ECMA) var appModule = angular.module('app', []); appModule.directive('hello', function() ...

  7. 一起学习PHP中GD库的使用（三）

    上篇文章我们已经学习了一个 GD 库的应用,那就是非常常用的制作验证码的功能.不过在现实的业务开发中,这种简单的验证码已经使用得不多了,大家会制作出更加复杂的验证码来使用.毕竟现在的各种外挂软件已经能 ...

  8. requests接口自动化-动态关联text/html格式

    动态关联,前一个接口返回的值为后一个接口请求的参数. # 动态关联 import requests def test_cookies(): # 以百度为例 r_baidu=requests.get(' ...

  9. 关于selenium添加使用代理ip

    最近在爬某个网站,发现这个网站的反爬太厉害了,正常时候的访问有时候都会给你弹出来验证,验证你是不是蜘蛛,而且requests发的请求携带了请求头信息,cookie信息,代理ip,也能识别是爬虫,他应该 ...

  10. Dockerfile 的常用参数注解和范例

    一. docker hello world 1.1 Dockerfile FROM centos:7.5.1804 MAINTAINER 11@qq.com CMD echo "hello ...