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. 数独（深搜）(poj2726,poj3074)

    数独(深搜)数据最弱版本(poj 2676) Description Sudoku is a very simple task. A square table with 9 rows and 9 co ...

  2. Linux CentOS 知识和常用命令

    1.常用热键 [Tab]它具有“命令补全”与“文件补全”的功能[Ctrl+C]中断执行中的程序组合键[Ctrl+d]键盘输入结束.也可以用来替代 exit 2.Linux 常用编辑器 vi 和 vim ...

  3. JS模块之AMD, CMD, CommonJS、UMD和ES6模块

    CommonJS 传送门 同步加载,适合服务器开发,node实现了commonJS.module.exports和require 判断commonJS环境的方式是(参考jquery源码): if ( ...

  4. js事件默认行为

    事件默认行为: 当一个事件发生的时候浏览器自己默认做的事情 怎么阻止? 当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用 return false; 但是return false 阻止的是 ...

  5. 宝塔nginx配置

    虚拟机配置 server { listen 80; server_name mayibang.co *.mayibang.co; index index.php index.html index.ht ...

  6. python 连接docker

    发现15年写过的一小段,先mark一下,后续玩儿起来 import docker c = docker.Client(base_url='unix://var/run/docker.sock',ver ...

  7. centos7 ftp 500 OOPS: cannot change directory:/var/ftp/xutong/

    在设置多用户登录的时候 该指定的用户xutong对于上级目录/var/ftp 没有访问权限 修改一下上级目录的权限 chmod /var/ftp 对于ftp多用户访问的配置修改也做一个记录 以是设置F ...

  8. 基本Sql语句汇总

    关于Sql语句的学习,选择的DBMS为SQL Server,Sql语句随着工作中的应用不断补充,不具备系统性,为个人笔记汇总,网上有很多优秀的资源,故不对每一处应用做过多细致的说明,后期会对部分篇幅较 ...

  9. AI学习笔记（02）

    AI学习笔记   第一个黑箭头是用于挑选物体和移 动物体.在绘图是选中一个物体,就可以将它自由的移动.和其他的绘图软件相同当你选 中物体的时候物体周围就会出现八个方形的控制点,你可以通过这些控制点对物 ...

  10. window查看哪些端口被占用命令

    管理员方式运行cmd netstat -n