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学习第一天学习笔记

随机推荐

看到就是赚到！Selenium完整框架——告别2017
这个框架大家可以拿过去直接用——作为送给大家的元旦礼物——船长对你们简直太好了! 学了这么长时间,又是定位,又是发邮件,还有乱七八糟的unittest,现在时候后把东西用起来了~而且学会了这一篇你就可 ...
BW数据加载
BW数据加载的优先级 1.主数据属性的加载步骤图从下到上 1)运行InfoPackage加载到PSA 找到主数据属性的InfoPackage,双击点击Start按钮点击监视器,查看运 ...
js中对数字进行正则判断
<script type="text/javascript"> function SubmitCk(num) { var reg = /^([a-zA-Z0-9]+[_ ...
PHP---如何修改域名的指定的根目录
如何修改域名的指定的根目录环境:linux 使用工具:xShell 修改域名指定的文件根目录需要修改nginx的配置文件第一步:连接xShell 第二步:进入根路径找到nginx的配置文件 cd ...
数据库的备份与恢复（oracle 11g）（转）
一. 内容与步骤 (注意这里许多步骤需要同学们查资料,理解并消化后才能完成) 1.数据库创建 (1) 安装Oralce11g: (2) 创建至少两个以上用户: (3) 每个用户 ...
Android Java访问本地方法(JNI)
当功能需要本地代码实现的时候,Java 代码就需要调用本地代码. 在调用本地代码时,首先要保证本地代码被加载到 Java 执行环境中并与 Java 代码连接在一起,这样 Java 代码在调用本地方法时 ...
骰子点数概率__dp
骰子点数概率时间限制:1 秒内存限制:32 兆题目描述: 把n个骰子扔在地上,所有骰子朝上一面的点数之和为S.输入n,打印出S的所有可能的值出现的概率. 输入: 输入包括一个整数N(1<= ...
关于vim搜索/替换功能的两条配置
之前是直接照着这篇的配置的强大的vim配置文件自己也只是对vim新建文件修改文件的哪个函数SetTitle()做了点修改,毕竟用vim只写C/C++和python.shell. 没想到今天在用vim ...
使用DOSGi在OSGi环境下发布Web Services
前言 Apache CXF是一个开源的服务框架项目,而Distributed OSGi子项目提供了基于OSGi远程服务规范的分布式组件实现.它使用Web Services,HTTP上的SOAP手段实现 ...
MongoDB day02
1.非关系型数据库和关系型数据库比较 1. 不是以关系模型构建的,结构自由 2. 非关系型数据库不保证数据的一致性 3. 非关系型数据库可以在处理高并发和海量数据时弥补关系型数据库的不足 4. 非关系 ...

Handlebars学习第一天

Handlebars学习第一天的更多相关文章

随机推荐

热门专题