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. homeland 开源论坛系统搭建试用

    备注: 需要使用docker docker-compose   1. clone 代码 git clone https://github.com/ruby-china/homeland-docker. ...

  2. container-diff 谷歌开源镜像分析工具使用

    1. 安装 curl -LO https://storage.googleapis.com/container-diff/latest/container-diff-linux-amd64 & ...

  3. Beyond Compare3 注册密钥和添加到右键菜单

    本人使用的是 Beyond Compare 3 ,版本 3.3.8(build 16340),密钥应收Beyond Compare 3都能够使用. 如想查看密钥,请参考本文末尾的隐藏内容 Beyond ...

  4. tomcat日志分类

    综合:Tomcat下相关的日志文件 Cataline引擎的日志文件,文件名catalina.日期.log Tomcat下内部代码丢出的日志,文件名localhost.日期.log(jsp页面内部错误的 ...

  5. nginx 通过proxy_next_upstream实现容灾和重复处理问题

    ngx_http_proxy_module 模块中包括proxy_next_upstream指令 语法: proxy_next_upstream error | timeout | invalid_h ...

  6. SharePoint2013工作流workflow manager配置

    SharePoint2013版本的工作流较sharepoint 2010变化较大,将工作流部分从sharepoint中分离出来为单独的服务,通过与sharepoint关联使用. SharePoint2 ...

  7. 没有80端口的备案域名，如何做微信公众平台的开发？本文介绍可以通过任何域名来做开发,www.baidu.com和www.163.com和www.so.com这样的域名都可以

    1.首先做过微信开发的朋友都知道,微信后台需要绑定80端口的备案域名,如果此时手上没有80端口的备案域名就不能进行开发了吗?当然不是 首先在这些地方绑定一个备案域名,国内公司的网址基本上是有备案的如w ...

  8. xunsearch安装及环境检测（一）

    1.运行执行下载解压安装包wget http://www.xunsearch.com/download/xunsearch-full-latest.tar.bz2解压到指定目录 tar -xjf xu ...

  9. 搭建基于hyperledger fabric的联盟社区（四） --chaincode开发

    前几章已经分别把三台虚拟机环境和配置文件准备好了,在启动fabric网络之前我们要准备好写好的chaincode.chaincode的开发一般是使用GO或者JAVA,而我选择的是GO语言.先分析一下官 ...

  10. sed详解---用法及解释

    1.sed -n '2'p filename 打印文件的第二行. 2.sed -n '1,3'p filename 打印文件的1到3行 3. sed -n '/Neave/'p filename 打印 ...