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. idea集成 MyBatis Generator 插件，自动生成dao,model,sql map文件

    1.集成到开发环境中 以maven管理的功能来举例,只需要将插件添加到pom.xml文件中即可.(注意此处是以plugin的方式,放在<plugins></plugins>中间 ...

  2. assembly|reads to contig|contig to scaffold|coverage|depth| tandem repeats

    (组装方面):SOAPdenovo ,因为采用de Bruijn graph algorithm算法和stepwise strategy ,所以排错能力高,所以我们获得高质量数据. de Bruijn ...

  3. SQL Prompt 格式化SQL会自动插入分号的问题

    一.问题 安装新版SQL Prompt,格式化SQL都会自动在SQL末端插入分号 格式化前 格式化后 二.解决方法 选择SQL Prompt下的Options... 选择左侧的Format下Style ...

  4. 点击增加删除class

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. Ubuntu 开机出现 "Your system is running in low-graphics mode"

    Ubuntu 开机出现 "Your system is running in low-graphics mode" 可能是权限问题 按网上的方法发现sudo命令无法使用,且系统变为 ...

  6. centos7 firewalld日常使用

    若生产中使用有docker,建议不要使用firewalld,改用iptables,用firewalld坑很多,暂时还未找到解决办法,在此做下记录: 说明:若加参数permanent为永久添加即添加至z ...

  7. Navicat Premium 12破解（转载）

    一.Navicat Premium 12下载 Navicat Premium 12是一套数据库开发管理工具,支持连接 MySQL.Oracle等多种数据库,可以快速轻松地创建.管理和维护数据库. Na ...

  8. JavaScript基础对象---Map

    一.创建Map对象 Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值 1.构造函数 语法:new Map([iterable])参数:         iterable  可 ...

  9. int内部方法释义

    python基本数据类型包括:int.str.list.tuple.dict.bool.set(),一切事物都是对象,对象由类创建 1. bit_length:返回数字占用的二进制最小位数 def b ...

  10. sql模糊查询,解除绑定的单号

    --610007570320-610007571319 1000张 delete from (select t.* from (select t1.bill_code, t1.bind_code, t ...