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. 解决chrome 批量下载器 mgblihnaaedmhhgadafknogahbgejnno 插件乱码

    找到 mgblihnaaedmhhgadafknogahbgejnno\当前版本号(0.0.1_0)\popup.html <html> <head> <meta cha ...

  2. （待解决）IDEA配置JDBC查询数据库PreparedStatement pstmt = dbconn.prepareStatement(sql)出现空指针错误

    package com.demo; import java.io.*; import java.sql.*; import java.util.*; import javax.servlet.*; i ...

  3. Android开发中JavaBean类和序列化知识的理解

    原创文章,转载请注明出处:http://www.cnblogs.com/baipengzhan/p/6296121.html Android开发中,我们经常用到JavaBean类以及序列化的知识,但经 ...

  4. [题解] codevs 1486 愚蠢的矿工

    http://codevs.cn/problem/1486/ 我们比较熟悉二叉树,题目中给出的是一棵多叉树,我们需要将这可二叉树改造成二叉树. 二叉树可以为这样的: 父亲结点左边储存儿子,右边储存兄弟 ...

  5. 文艺平衡树（splay模板）

    题干:splay模板,要求维护区间反转. splay是一种码量小于treap,但支持排名,前驱后继等treap可求的东西,也支持区间反转的平衡树. 但是有两个坏处: 1.splay常数远远大于trea ...

  6. Informatica抽取SQL Server数据库乱码

    1.首先确认数据库的关系连接所使用的代码页,是否一致 2.如果上述方法不行,在Designer中更改数据类型,将string类型改为nstring类型,中文就没有乱码了 3.SQL Server数据库 ...

  7. 安装MySQL for Windows 数据库

    在官网下载MySql数据库windows版本:http://dev.mysql.com/downloads/file/?id=459075 下载到本地解压出来,如下图: 复制上面目录下的my-defa ...

  8. #region 私有字段

    #region 私有字段                   private string _读者类别;          private string _读者类别名称;          priva ...

  9. jenkins 提示No emails were triggered

    发送邮件 Jenkins->系统管理->系统设置,在“邮件通知”里设置smtp服务器地址,以及发送者邮箱地址,在具体的任务构建完成以后,可以设置发送邮件,在某一个任务的"Add ...

  10. php对象（继承，多态）

    /2.继承//function abc(){// $arr = func_get_args();//}//子类只能有一个父类 一个父类 可以有多个子类//override 重写//overlood 重 ...