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学习第一天的更多相关文章

  1. Magento学习第一课——目录结构介绍

    Magento学习第一课--目录结构介绍 一．Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...

  2. YII2学习第一天

    YII2学习第一天,之前稍微看了看TP,感觉和自己的理念不是很符合,然后转学YII2了. 使用的文档是https://github.com/yiisoft/yii2/tree/master/docs/ ...

  3. Java学习第一天

    Java学习第一天 对于网络管理员或者黑客必须知道的八个cmd命令 详情请参考:http://www.2cto.com/os/201608/533964.html          nbtstat  ...

  4. 一、Android学习第一天——环境搭建（转）

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 一. Android学习第一天——环境搭建 Android 开发环境的搭建 ...

  5. web学习第一章

    web学习第一章   我是大概9月10日开始走上IT之路的,一开始学习了小段时间的自动化办公软件, 昨天我开始学习客户端网页编程,我了解什么是WEB,一些比较老古董的计算模式和发展历史,印象最让我深刻 ...

  6. Java 学习第一步-JDK安装和Java环境变量配置

    Java学习第一步——JDK安装及Java环境变量配置 [原文]  2014-05-30 9:09  Java SE  阿超  9046 views Java作为当下很主流的编程语言,学习Java的朋 ...

  7. swift系统学习第一章

    第一节:变量,常量,类型推断,字符,字符串 //swift学习第一节 /* 变量 常量 类型推断 字符 字符串 */ import UIKit //变量 var str = "swift&q ...

  8. (译) 强化学习 第一部分：Q-Learning 以及相关探索

    (译) 强化学习 第一部分:Q-Learning 以及相关探索 Q-Learning review: Q-Learning 的基础要点是:有一个关于环境状态S的表达式,这些状态中可能的动作 a,然后你 ...

  9. [未完成]WebService学习第一天学习笔记

    [未完成]WebService学习第一天学习笔记[未完成]WebService学习第一天学习笔记

随机推荐

  1. css table 布局 与 JavaScript 指定区域打印功能

      <!DOCTYPE html> <html lang="en"><head> <meta http-equiv="conte ...

  2. Service Mesh 了解

    是什么 Service Mesh是专用的基础设施层. 轻量级高性能网络代理. 提供安全的.快速的.可靠地服务间通讯. 与实际应用部署一起但对应用是透明的 作用 提供熔断机制(circuit-break ...

  3. JS脚本不能运行

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/moqiang02/article/details/25898295 这段时间在做前端的动态页面,出了 ...

  4. ( 转)mappingResource属性和mappingDirectoryLocations属性的使用

    在Spring的applicationContext.xml中配置映射文件,通常是在这个Bean实例中进行的,若配置的映射文件较少时,可以用sessionFactory的所属类LocalSession ...

  5. nginx 域名跳转一例~~~(rewrite、proxy)

    来自: http://storysky.blog.51cto.com/628458/486338/ 前几天搭了一个论坛服务器并放到了公司的局域网里面,论坛用的是9066端口并在路由器上面做了个端口转发 ...

  6. 在vue中无论使用router-link 还是 @click事件，发现都没法从列表页点击跳转到内容页去

    在vue中如论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去,以前都是可以的,想着唯一不同的场景就是因为运用了scroll组件(https://ustbhua ...

  7. waitpid()设置WNOHANG位（非阻塞模式）判断子进程的状态是否有所改变

    参考<Linux/Unix系统编程手册>26.1.5,对于系统调用waitid() #include <sys/wait.h> int waitid(idtype_t idty ...

  8. 一些非常好的VC++/MFC开源项目链接

    Introduction List of some of the best Open Source projects written in VC++/MFC. Background Codeproje ...

  9. ActiveMQ的多种部署方式--ActiveMQ学习之二

    单点的ActiveMQ作为企业应用无法满足高可用和集群的需求,所以ActiveMQ提供了master-slave.broker cluster等多种部署方式,但通过分析多种部署方式之后我认为需要将两种 ...

  10. python多标签分类模版

    from sklearn.multioutput import MultiOutputClassifier from sklearn.ensemble import RandomForestClass ...