Handlebars.js下载地址：http://handlebarsjs.com/

最近自己在建一个站，采用完全的前后端分离的方式，现在正在做前端的部分。其中有项功能是需要ajax调用后端接口，返回json数据后要动态的插入数据。但是一开始我自己是用最"传统"的通过js拼接html字符串，然后再用jq插入到页面中的方式。比如说下面的这个例子，我要显示一个个人信息卡：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>Index</title>

         <script src="js/jquery.js"></script>

         <style>

             .person {

                 font-size:40px;

                 float:left;

                 padding:20px;

                 margin:30px;

                 background-color:pink;

             }

         </style>

     </head>

     <body>

         <div class = "person" id="person_info">

         </div>

     </body>

     <script>

         var data = {

             name:'约翰莫里森',

             home:'美国',

             job:'摔跤手'

         };

         var str = "";

         str += "<div>姓名：" + data.name + "</div>";

         str += "<div>出生地：" + data.home + "</div>";

         str += "<div>职业：" + data.job + "</div>";

         $('#person_info').html(str);

     </script>

 </html>

这里我得用自己"手动"拼接html字符串，况且这只是一个极其简单的例子，如果标签之间的嵌套、属性复杂的话，这种方式写起来相当的麻烦，且标签间没有层次结构，可读性和维护性极差。

后来偶然在个地方了解到了模板引擎，从此这种工作一下简便了许多！ 先看下用Handlebars完成上面的例子是如何操作的：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>Handlebars</title>

         <script src="js/jquery.js"></script>

         <script src="js/handlebars.js"></script>

         <style>

             .person {

                 font-size:40px;

                 float:left;

                 padding:10px;

                 margin-left:30px;

                 background-color:pink;

             }

         </style>

     </head>

     <body>

         <div id = "person_info">

             <div class = "person">

                 <div>姓名：{{name}}</div>

                 <div>出生地：{{home}}</div>

                 <div>职业：{{job}}</div>

             </div>

         </div>

     </body>

     <script>

         var data ={

             name:'约翰莫里森',

             home:'美国',

             job:'摔跤手'

         };

         var tmpl = $('#person_info').html();

         var func = Handlebars.compile(tmpl);

         var result = func(data);

         $('#person_info').html(result);

     </script>

 </html>

先从最下面的js代码讲起，核心代码就这四句：

         var tmpl = $('#person_info').html();

         var func = Handlebars.compile(tmpl);

         var result = func(data);

         $('#person_info').html(result);

第一行的 var tmpl = $('#person_info').html(); 就只是基本的jq语法；<body>中<div id="person_info">块中的就是html模板，这里取得了该div块下的html模板内容(对象tmpl)。此时如果用console.log(tmpl)打印该对象的话，得到的内容是

             <div class = "person">

                 <div>姓名：{{name}}</div>

                 <div>出生地：{{home}}</div>

                 <div>职业：{{job}}</div>

             </div>

用两个大括号括起来的变量名会在后面 向函数传入数据(下面会提到) 时进行匹配。

第二行 var func = Handlebars.compile(tmpl); 通过Handlebars的compile()对刚刚取得的html模板进行预编译，返回的是一个函数(现在对象func即为该函数)。

var result = func(data); 这个函数带有一个参数，该参数为用以匹配模板用的数据。我这里事先写死一个数据对象data，然后传入该函数内。返回值是匹配好的html内容，打印出来就是 ：

             <div class = "person">

                 <div>姓名：约翰莫里森</div>

                 <div>出生地：美国</div>

                 <div>职业：摔跤手</div>

             </div>

最后用jq将内容插入到页面中： $('#person_info').html(result);

如果有多项数据需要展示，则需要用到{{#each this}}  {{/each}}。 语法类似标签，所以要注意别漏了闭合标签{{/each}}。 {{#each this}} ... {{/each}}中间的内容是模板。this 则是指传入函数的数据data。  用在实现上述例子的代码如下：

 <body>

         <div id = "person_info">

             {{#each this}}

             <div class = "person">

                 <div>姓名：{{name}}</div>

                 <div>出生地：{{home}}</div>

                 <div>职业：{{job}}</div>

             </div>

             {{/each}}

         </div>

     </body>

     <script>

         var data =[{

             name:'约翰莫里森',

             home:'美国',

             job:'摔跤手'

         },

         {

             name:'Faker',

             home:'韩国',

             job:'英雄联盟职业选手'

         }];

         var tmpl = $('#person_info').html();

         var func = Handlebars.compile(tmpl);

         var result = func(data);

         $('#person_info').html(result);

     </script>

如果对象间所包含的数据域有个别不同，则需要分支语句进行判断  即{{#if xxx}} {/if}}。 用例如下：

 <body>

         <div id = "person_info">

             {{#each this}}

             <div class = "person">

                 <div>姓名：{{name}}</div>

                 <div>出生地：{{home}}</div>

                 <div>职业：{{job}}</div>

                 {{#if life}}

                 　　<div>生涯经历：</div>

                     <ul>

                     {{#each life}}

                         <li>{{this}}</li>

                     {{/each}}

                     </ul>

                 {{/if}}

             </div>

             {{/each}}

         </div>

     </body>

     <script>

         var data =[{

             name:'约翰莫里森',

             home:'美国',

             job:'摔跤手'

         },

         {

             name:'Faker',

             home:'韩国',

             job:'英雄联盟职业选手',

             life:['S3世界总冠军','S4世界总冠军','S5世界总冠军']

         }];

         var tmpl = $('#person_info').html();

         console.log(tmpl);

         var func = Handlebars.compile(tmpl);

         var result = func(data);

         $('#person_info').html(result);

     </script>

最后再附上一篇关于Handlebars语法比较详细的介绍：http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/

javascript/jquery模板引擎——Handlebars初体验的更多相关文章

  1. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  2. 10 个强大的JavaScript / jQuery 模板引擎推荐

    模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档.由于在开发过程中,网站或应用程序的界面与数据实现分离,大大提升了开发效率,良好的设计也使得代码重用变得更加容易. 本文 ...

  3. 【阿里云产品公测】云引擎ACE初体验

    作者:阿里云用户蓝色之鹰 :RYYjmG5;  来投票支持我把=i2]qj\  序号2. [阿里云产品公测]云引擎ACE初体验:作者:蓝色之鹰 e(OKE7  序号10.[阿里云产品公测]结构化数据服 ...

  4. Javascript模板引擎handlebars使用实例及技巧

    转:http://rfyiamcool.blog.51cto.com/1030776/1278620 我们在开发的时候针对DOM操作,用简单的JS应用来说不成问题,但如果你对视图的每次更新都需要对我文 ...

  5. JavaScript模板引擎Handlebars

    Handlebars模板库简单介绍 Handlebars是JavaScript一个语义模板库,通过对view(模板)和data(ajax请求的数据,一般是json)的分离来快速构建Web模板.它采用& ...

  6. JS模板引擎handlebars.js的简单使用

    handlebars.js的使用 首先我们要明白handlebars.js是干什么用的,我们知道使用jsp很麻烦, 于是我们开始使用freemarker等模板引擎,但这个只是针对服务器端来解 析的,那 ...

  7. day12—jQuery ui引入及初体验

    转行学开发,代码100天——2018-03-28 按照所下载教学视频,今天已进行到jQuery UI的学习中.注:本人所用教学视频不是太完整,介绍的内容相对简单,有些只是带过.其他时间中,仍需继续针对 ...

  8. 关于模板引擎handlebars.js基本用法

    说明:模板引擎主要针对于渲染DOM,取代了字符串拼接,用下面的代码亲测handlebars模板引擎比字符串拼接渲染DOM慢了20ms, 这里配置一个在线DEMO,简单说明下handlebars.js的 ...

  9. JS 模板引擎 Handlebars.js 中文说明

    Handlebars 为你提供了一个可以毫无挫折感的高效率书写 语义化的模板 所必需的一切. Mustache 模板和 Handlebars 是兼容的,所以你可以把Mustache模板拿来导入到Han ...

随机推荐

  1. Ubuntu 18的网络配置

    包括Ubuntu 18.04和18.10,设置为静态IP及DNS. sudo vim /etc/netplan/50-cloud-init.yaml network: ethernets: enp4s ...

  2. docker-machine 快速搭建docker环境

    环境:腾讯云测试成功 1.条件:本地主机A和远程主机B 2.远程主机B,配置免密登录 1,在本地主机A上生成公钥和私钥,生成命令:ssh-keygen -t rsa 私钥:id_rsa 公钥:id_r ...

  3. 第三章：systemverilog文本值和数据类型

    1.增强的文本值 2.改进的`define文本替换 3.时间值 4.新的变量类型 5.有符号和无符号类型 6.静态和动态变量(***) 7.类型转换 8.常数 增强的文本值(文本赋值增强) 主要是:位 ...

  4. 数据结构实验6：C++实现二叉树类

    实验6 学号:     姓名:      专业:   6.1 实验目的 掌握二叉树的动态链表存储结构及表示. 掌握二叉树的三种遍历算法(递归和非递归两类). 运用二叉树三种遍历的方法求解有关问题. 6 ...

  5. ubuntu安装远程桌面连接工具

    1. 安装xrdp sudo apt-get -y install xrdp   2.安装vnc4server sudo apt-get install vnc4server   3.安装xubunt ...

  6. java中如何将string转化成long

  7. 【分块打表】bzoj 3758 数数

    [题目描述] Description 神犇最近闲来无事,于是就思考哲学,研究数字之美.在神犇看来,如果一个数的各位能够被分成两个集合,而且这两个集合里的数的和相等,那么这个数就是优美的(具体原因就只有 ...

  8. C语言一些常见的操作字符串方法

    // 首字母大写 ;(c=string[i])!='\0';i++) // 字符串碰到\0结束 C知识 { if (c==' ') { printf("%c",c), word=; ...

  9. [转]Android SDK下载和更新失败的解决方法

    今天更新sdk,遇到了更新下载失败问题: Fetching https://dl-ssl.google.com/android/repository/addons_list-2.xmlFetched ...

  10. 最大数（cogs 1844）

    [题目描述] 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作.语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度. 2. 插入操作 ...