js模板引擎laytpl的使用
在我们实际的开发过程中,可能会遇到使用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的使用的更多相关文章
- laytpl js模板引擎
laytpl js模板引擎.laytpl是一款非常轻量的JavaScript模板引擎.地址:http://www.layui.com/laytpl/ 用法与handlebar.js类似,但是比较轻量级 ...
- doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
- JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...
- 掌握js模板引擎
最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...
- js模板引擎
js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...
- 调研js模板引擎
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- js模板引擎介绍搜集
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- Filter - Surge.js模板引擎过滤器
版权所有,转载请注明出处:http://guangboo.org/2014/01/05/filter-surgejs-template-engine 过滤器在surge.js模板引擎中多处用到,其类似 ...
随机推荐
- tornado2.2安装教程
最近要用到vxworks 系统,所以避免不了要安装tornado 软件,进行相关的开发. 自己在安装过程中遇到了点点问题,这里记录下来,免得以后再次安装时遇到同样的问题. 1. 首先提供一个tor ...
- K8S 简介
K8S架构与组件 kubectl: 是一个客户端管理工具,直接管理API server,提供请求给API server,中间有auth认证.用户使用kubectl命令来请求API Server接口完成 ...
- 记一次 .NET 某桌面奇侠游戏 非托管内存泄漏分析
一:背景 1. 讲故事 说实话,这篇dump我本来是不准备上一篇文章来解读的,但它有两点深深的感动了我. 无数次的听说用 Unity 可做游戏开发,但百闻不如一见. 游戏中有很多金庸武侠小说才有的名字 ...
- LVS+keepalived集群
一.Keepalived工具介绍专为LVS和HA设计的一款健康检查工具 支持故障自动切换(Failover) 支持节点健康状态检查(Health Checking) 官方网站:http://www.k ...
- 【第一篇】- Git 教程之Spring Cloud直播商城 b2b2c电子商务技术总结
Git 教程 Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制 ...
- 日期SQL 脚本
一个月第一天的 SELECT DATEADD(mm, DATEDIFF(mm,0,getdate()), 0)本周的星期一 SELECT DATEADD(wk, DATEDIFF(wk,0,g ...
- 【C++周报】第二期 2021-8-19
这次我们照样看一道题.个人认为比上一次的简单. https://vijos.org/p/1130 先说方法,动态规划,你能想到什么? "在它的左边加上一个自然数,但该自然数不能超过原数的一半 ...
- PHP中的数组分页实现(非数据库)
在日常开发的业务环境中,我们一般都会使用 MySQL 语句来实现分页的功能.但是,往往也有些数据并不多,或者只是获取 PHP 中定义的一些数组数据时需要分页的功能.这时,我们其实不需要每次都去查询数据 ...
- echsop设置伪静态
1.后台商店设置-基本设置-URL重写开启 2.修改httpd.conf文件 AllowOverride None 改为 AllowOverride AllLoadModule rewrite_mod ...
- 搭建http文件服务器 - Windows使用IIS搭建http文件服务器