Handlebars学习第一天
1、什么是handlebars？？？是用来做什么的？？？
首先我们要了解几种前端页面展示的几种模式：
a、Struct+vo+el表达式的模式
这种模式的特点：代码看起来比较整齐，但代码解析完才发送到客户端显示的。
<c:forEach var='bm' items="${contractAuditVo.borrowerModels}">
<table>
<tbody>
<tr>
<td>借款人编号：</td>
<td>
<p>
${bm.borrowerId }
</p>
</td>
</tr>
<tr>
<td>客户编号：</td>
<td>
<p>
${bm.customerId }
</p>
</td>
</tr>
<tr>
<td>曾用名：</td>
<td>
<p>
${bm.usedName }
</p>
</td>
</tr>
</tbody>
</table>
</c:forEach>
b、Json+ajax+html显示
这种模式的特点：代码的解析在客户端，解析比较快，用户体验好，但是表现层和控制层是混在一块的，不利于后期的维护，代码不美观。
var contractTextHtml="";
$.each(jsonObject.cl,function(i,n){ contractTextHtml=""; //插入合同文本数据
contractTextHtml+="<div title='出借人信息---"+hiddenNull(n.cm.lenderName)+"' style='overflow:auto;padding:5px;'>";
contractTextHtml+="<table class='ui-table ui-table-noborder'>";
contractTextHtml+="<tbody>";
contractTextHtml+="<tr><td>合同编号：</td><td><p>"+hiddenNull(n.cm.contractId)+"</p></td></tr>";
contractTextHtml+="<tr class='ui-table-split'><td>出借人姓名：</td><td><p>"+hiddenNull(n.cm.lenderName)+"</p></td></tr>";
contractTextHtml+="<tr><td>出借人证件类型：</td><td><p>"+hiddenNull(n.cm.lenderIdType)+"</p></td></tr>";
contractTextHtml+="<tr class='ui-table-split'><td>出借人证件号：</td><td><p>"+hiddenNull(n.cm.lenderIdNum)+"</p></td></tr>";
contractTextHtml+="<tr><td>出借金额：</td><td><p>"+hiddenNull(n.cm.lenderAmount)+"</p></td></tr>";
contractTextHtml+="<tr class='ui-table-split'><td>出借人编号：</td><td><p>"+hiddenNull(n.cm.lenderNo)+"</p></td></tr>";
contractTextHtml+="<tr><td>出借人银行帐号：</td><td><p>"+hiddenNull(n.cm.lenderBankAccount)+"</p></td></tr>";
contractTextHtml+="<tr class='ui-table-split'><td>撮合编号：</td><td><p>"+hiddenNull(n.cm.makeMatchNo)+"</p></td></tr>";
contractTextHtml+="</tbody>";
contractTextHtml+="</table>";
contractTextHtml+="</div>";
$("#textList").append(contractTextHtml);
});
到这儿我们就要考虑了，能不能把二者的优点结合起来，因此我们的Handlebars就应运而生了。。。。。。
它的特点：i、它是基于jQuery的插件，所以千万别忘了引入jQuery的jar包和他的jar包
ii、json对象最为数据源，分模块编写，结构清晰。
2、这东西怎么用那？？？？
用起来也是相当的简单，可以说：简单粗暴有力，毕竟是建立在别人心血的基础上，所以在用它的时候，我们要好好感谢一下整合这个东西的人！！！
a、第一步：引入相关的jar包
1 <script type="text/javascript" src="script/jquery.js"></script>
2 <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
b、获取到json串，这儿我们模拟一个Jason串即可
c、写一个html的框架将其封装到<script>中
d、写一个由id唯一确定的Handlebar模板，获取html的框架。
e、将上一步获得的Handlebar模板插入到html代码中即可。
<!DOCTYPE html>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>each-基本循环使用方法 - by 杨元</title>
</head>
<body>
<h1>each-基本循环使用方法</h1>
<!--基础html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tableList"> </tbody>
</table> <!--插件引用-->
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script> <!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each student}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{/each}}
</script> <!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = {
"student": [
{
"name": "张三",
"sex": "0",
"age": 18
},
{
"name": "李四",
"sex": "0",
"age": 22
},
{
"name": "妞妞",
"sex": "1",
"age": 18
}
]
}; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
$('#tableList').html(myTemplate(data));
});
</script>
</body>
</html>
这是效果图，灰常的nice！！！
Handlebars学习第一天的更多相关文章
- Magento学习第一课——目录结构介绍
Magento学习第一课--目录结构介绍 一．Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...
- YII2学习第一天
YII2学习第一天,之前稍微看了看TP,感觉和自己的理念不是很符合,然后转学YII2了. 使用的文档是https://github.com/yiisoft/yii2/tree/master/docs/ ...
- Java学习第一天
Java学习第一天 对于网络管理员或者黑客必须知道的八个cmd命令 详情请参考:http://www.2cto.com/os/201608/533964.html nbtstat ...
- 一、Android学习第一天——环境搭建（转）
(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 一. Android学习第一天——环境搭建 Android 开发环境的搭建 ...
- web学习第一章
web学习第一章 我是大概9月10日开始走上IT之路的,一开始学习了小段时间的自动化办公软件, 昨天我开始学习客户端网页编程,我了解什么是WEB,一些比较老古董的计算模式和发展历史,印象最让我深刻 ...
- Java 学习第一步-JDK安装和Java环境变量配置
Java学习第一步——JDK安装及Java环境变量配置 [原文] 2014-05-30 9:09 Java SE 阿超 9046 views Java作为当下很主流的编程语言,学习Java的朋 ...
- swift系统学习第一章
第一节:变量,常量,类型推断,字符,字符串 //swift学习第一节 /* 变量 常量 类型推断 字符 字符串 */ import UIKit //变量 var str = "swift&q ...
- (译) 强化学习 第一部分：Q-Learning 以及相关探索
(译) 强化学习 第一部分:Q-Learning 以及相关探索 Q-Learning review: Q-Learning 的基础要点是:有一个关于环境状态S的表达式,这些状态中可能的动作 a,然后你 ...
- [未完成]WebService学习第一天学习笔记
[未完成]WebService学习第一天学习笔记[未完成]WebService学习第一天学习笔记
随机推荐
- 日志框架--（二）JDK Logging
前言 从jdk1.4起,JDK开始自带一套日志系统.JDK Logger最大的优点就是不需要任何类库的支持,只要有Java的运行环境就可以使用.相对于其他的日志框架,JDK自带的日志可谓是鸡肋,无论易 ...
- Thread中，join（）方法
Thread中,join()方法的作用是调用线程等待该线程完成后,才能继续用下运行. public static void main(String[] args) throws Interrupted ...
- wekan 工具配置
1. 安装 使用docker-compose 安装,主要是方便简单,后期维护比较简单 2. 配置 docker-compose.yaml 文件 version: '2' ser ...
- Google Chrome 总提示flash插件过期，用命令行模式解决
目标那改成:"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --args --allow-outdate ...
- java.lang.NoSuchFieldError: TRACE
Exception in thread "main" java.lang.NoSuchFieldError: TRACE at org.jboss.logging.Log4j ...
- 【备忘：待完善】nsq集群初体验
本机的一个节点及监控与管理后台 虚拟机中的一个节点 命令: [root@vm-vagrant nsq]# nsqd --lookupd-tcp-address=192.168.23.150:4160 ...
- ASP.NET-自定义HttpModule与HttpHandler介绍
ASP.NET对请求处理的过程:当请求一个*.aspx文件的时候,这个请求会被inetinfo.exe进程截获,它判断文件的后缀(aspx)之后,将这个请求转交给 ASPNET_ISAPI.dll,A ...
- 32位centos下安装jdk1.7报Permission denied处理方式
本文转载自:http://blog.csdn.net/snowwhitewolf/article/details/50287877 环境:centos5.8 32位jdk-7u71-Linux-i58 ...
- 让html标签显示在页面上
用 <xmp></xmp> 标签包起来,里面的所有文字会原样显示出来 <xmp><b>1</b><div>2</div&g ...
- python文本挖掘模版
import xlrd import jieba import sys import importlib import os #python内置的包,用于进行文件目录操作,我们将会用到os.listd ...