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. Asp.net Global 定时执行

    在复杂的业务应用程序中,有时候会要求一个或者多个任务在一定的时间或者一定的时间间隔内计划进行,比如定时备份或同步数据库,定时发送电子邮件,定期处理用户状态信息,支付系统中定期同步异常账单等等,我们称之 ...

  2. CSU1632Repeated Substrings（后缀数组/最长公共前缀）

    题意就是求一个字符串的重复出现(出现次数>=2)的不同子串的个数. 标准解法是后缀数组.最长公共前缀的应用,对于样例aabaab,先将所有后缀排序: aab 3    aabaab 1    a ...

  3. ballerina 学习十四 values && types

    ballerina 包含的数据类型有string int map array record boolean ojbect function table tuple any 简单说明 数据类型和其他语言 ...

  4. 【转】python 字符编码与解码——unicode、str和中文：UnicodeDecodeError: 'ascii' codec can't decode

    原文网址:http://blog.csdn.net/trochiluses/article/details/16825269 摘要:在进行python脚本的编写时,如果我们用python来处理网页数据 ...

  5. sql的一些事件处理

    select getdate() select Convert(varchar(10),getdate(),120) yyyy-mm-ddselect Convert(varchar(20),getd ...

  6. Android 从上层到底层-----app层

    CPU:RK3288 系统:Android 5.1 功能:上层 app 控制 led 亮灭 开发板:Firefly RK3288 MainActivity.java package com.aaron ...

  7. VMware下安装的Mac OS X如何修改显示分辨率 (转)

    我在Win7下利用VMware安装了苹果的OS x 10.8系统,安装成功启动后,发现分辨率为1024*768,而宿机的分辨率是1440*900,我想让虚拟机全屏显示,也就是想在雪豹下屏幕的分辨率也能 ...

  8. 面向对象（PHP学习）

    在对超大型项目的开发过程中,如果使用面向过程地开发,代码量是非常的庞大,这将大量的用到判断和循环嵌套, 和很多很相似的代码,不仅使项目代码量更加的庞大,还不利于开发,重用及维护. 面向对象就能很好的解 ...

  9. Unit02： 参数值注入 、 基于注解的组件扫描

    Unit02: 参数值注入 . 基于注解的组件扫描 (4)IOC (Inversion Of Controll 控制反转) 什么是IOC? 对象之间的依赖关系由容器来建立. 什么是DI? (Depen ...

  10. 手动封装OpenCV1.0的IplImage读取保存功能遇到的小问题

    最近准备重新学习图像处理的知识,主要目的是自己实现一遍图像处理的算法,所以除了读取.保存图像外的操作都自己写,没想到直接封装OpenCV的读取.保存功能的第一步就出错.关键代码如下 void MyIm ...