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

    1.基本对象和Function(函数)方法对象 2.概念 3.创建function对象的三种方式: 第一种不建议使用 2.3两种方式就是方法名位置不同,建议使用: 4.方法调用只要名字对,实参不一定完 ...

  2. [第四篇]——Windows Docker 安装之Spring Cloud直播商城 b2b2c电子商务技术总结

    Windows Docker 安装 Docker 并非是一个通用的容器工具,它依赖于已存在并运行的 Linux 内核环境. Docker 实质上是在已经运行的 Linux 下制造了一个隔离的文件环境, ...

  3. webService动态调用及返回至处理

    http://www.cnblogs.com/xffy1028/archive/2012/05/07/2487595.html using System; using System.Collectio ...

  4. 跨域分布式系统单点登录的实现（CAS单点登录）

    1. 概述 上一次我们聊了一下<使用Redis实现分布式会话>,原理就是使用 客户端Cookie + Redis 的方式来验证用户是否登录. 如果分布式系统中,只是对Tomcat做了负载均 ...

  5. zt:我使用过的Linux命令之ar - 创建静态库.a文件

    我使用过的Linux命令之ar - 创建静态库.a文件 本文链接:http://codingstandards.iteye.com/blog/1142358    (转载请注明出处) 用途说明 创建静 ...

  6. java设计模式，工厂，代理模式等

    javaEE设计模式: 工厂模式:主要分为三种模式: 定义:在基类中定义创建对象的一个接口,让子类决定实例化哪个类.工厂方法让一个类的实例化延迟到子类中进行. 为什么要使用工厂模式: (1) 解耦 : ...

  7. DEDECMS首页循环调用一级栏目和二级栏目的实现方法

    调用方法: {dede:channelartlist typeid='2'} <li class="First"><a href="{dede:fiel ...

  8. Jmeter扩展组件开发（8） - 函数助手扩展开发demo

    前提条件 1.pom文件引用ApacheJMeter_functions包 <dependency> <groupId>org.apache.jmeter</groupI ...

  9. DevOps与CICD简介

    整体知识点 ·Devops与CI/CD简介 ·Gitlab安装与Git命令使用 ·Gitlab实现持续集成 ·Gitlab实现分支管理 ·Jenkins简介及安装 ·Jenkins插件管理及基础配置 ...

  10. python学习笔记(十三)-python对Excel进行读写修改操作

    日常工作中会遇到Excel的读写问题.我们可以使用xlwt 模块将数据写入Excel表格,使用xlrd 模块从Excel读取数据,使用xlutils模块和xlrd模块结合对Excel数据进行修改.下面 ...