在我们实际的开发过程中，可能会遇到使用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. Linux网络编程：原始套接字简介

    Linux网络编程:原始套接字编程 一.原始套接字用途 通常情况下程序员接所接触到的套接字(Socket)为两类: 流式套接字(SOCK_STREAM):一种面向连接的Socket,针对于面向连接的T ...

  2. sed中传递变量进行替换

    sed命令中传递变量 例如:修改配置文件某一个变量的值 配置文件如下: toney@ubantu:/mnt/hgfs/em嵌入式学习记录/shell/shell脚本常见用法$ cat common_u ...

  3. Spring Boot中使用@Async实现异步调用，加速任务的执行！

    什么是"异步调用"?"异步调用"对应的是"同步调用",同步调用指程序按照定义顺序依次执行,每一行程序都必须等待上一行程序执行完成之后才能执行 ...

  4. 使用私有gitlab发布自动生成版本号和标签（version和tag）（骚）

    设置 semantic ,自动生成版本号和标签 FROM node:14-buster-slim LABEL maintainer="wangyunpeng" COPY sourc ...

  5. javascript 定时器 timer setTimeout setInterval (js for循环如何等待几秒再循环)

    实现一个打点计时器,要求1.从 start 到 end(包含 start 和 end),每隔 100 毫秒 console.log 一个数字,每次数字增幅为 12.返回的对象中需要包含一个 cance ...

  6. abp 以或的方式验证多个 AuthorizeAttribute

    前言 在使用 abp 开发业务功能时,会遇到公用同一个类的情况,在给这个类配置权限时,就要添加多个 AuthorizeAttribute,类似下面这样: [Authorize(DcsPermissio ...

  7. 使用Gitmoji进行git commit的快速查阅指南

    目录 前言 1. 查阅方法:脚本法 1.1 利用 VS Code 编辑多行文本快速写脚本文件 1.2 给脚本添加可执行权限 1.3 修改环境变量 PATH 使脚本在所有路径下都可以执行(全局执行) 2 ...

  8. 鸿蒙内核源码分析(根文件系统) | 先挂到`/`上的文件系统 | 百篇博客分析OpenHarmony源码 | v66.01

    百篇博客系列篇.本篇为: v66.xx 鸿蒙内核源码分析(根文件系统) | 先挂到/上的文件系统 | 51.c.h.o 文件系统相关篇为: v62.xx 鸿蒙内核源码分析(文件概念篇) | 为什么说一 ...

  9. 阿里云ECS服务器Centos中安装SQL Server（破解内存限制）

    前言 前段时间赶上阿里云618活动入手了一个低配的Linux服务器,供自己学习使用,在安装SQL Server中遇到了很多小问题,查阅很多博客结合自身遇到的问题做个总结. 安装过程 1.下载阿里云在线 ...

  10. Kubernetes client-go Indexer / ThreadSafeStore 源码分析

    Kubernetes client-go Indexer / ThreadSafeStore 源码分析   请阅读原文:原文地址   Contents 概述 Indexer 接口 ThreadSafe ...