javascript/jquery模板引擎——Handlebars初体验

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初体验的更多相关文章

Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整
Handlebars的基本用法使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...
10 个强大的JavaScript / jQuery 模板引擎推荐
模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档.由于在开发过程中,网站或应用程序的界面与数据实现分离,大大提升了开发效率,良好的设计也使得代码重用变得更加容易. 本文 ...
【阿里云产品公测】云引擎ACE初体验
作者:阿里云用户蓝色之鹰 :RYYjmG5; 来投票支持我把=i2]qj\ 序号2. [阿里云产品公测]云引擎ACE初体验:作者:蓝色之鹰 e(OKE7 序号10.[阿里云产品公测]结构化数据服 ...
Javascript模板引擎handlebars使用实例及技巧
转:http://rfyiamcool.blog.51cto.com/1030776/1278620 我们在开发的时候针对DOM操作,用简单的JS应用来说不成问题,但如果你对视图的每次更新都需要对我文 ...
JavaScript模板引擎Handlebars
Handlebars模板库简单介绍 Handlebars是JavaScript一个语义模板库,通过对view(模板)和data(ajax请求的数据,一般是json)的分离来快速构建Web模板.它采用& ...
JS模板引擎handlebars.js的简单使用
handlebars.js的使用首先我们要明白handlebars.js是干什么用的,我们知道使用jsp很麻烦, 于是我们开始使用freemarker等模板引擎,但这个只是针对服务器端来解析的,那 ...
day12—jQuery ui引入及初体验
转行学开发,代码100天——2018-03-28 按照所下载教学视频,今天已进行到jQuery UI的学习中.注:本人所用教学视频不是太完整,介绍的内容相对简单,有些只是带过.其他时间中,仍需继续针对 ...
关于模板引擎handlebars.js基本用法
说明:模板引擎主要针对于渲染DOM,取代了字符串拼接,用下面的代码亲测handlebars模板引擎比字符串拼接渲染DOM慢了20ms, 这里配置一个在线DEMO,简单说明下handlebars.js的 ...
JS 模板引擎 Handlebars.js 中文说明
Handlebars 为你提供了一个可以毫无挫折感的高效率书写语义化的模板所必需的一切. Mustache 模板和 Handlebars 是兼容的,所以你可以把Mustache模板拿来导入到Han ...

随机推荐

Sybase PowerDesigner 16.5注册码
Sybase PowerDesigner16.5安装之后一段时间就会过期,破解办法是:将pdflm16.dll文件覆盖原来的即可. pdflm16.dll文件下载地址:链接:https://pan.b ...
使用jave2将音频wav转换成mp3格式
最近需要用到语音合成功能,网上查阅了一番,发现可以使用腾讯云的语音合成API来完成这个功能,但是腾讯云的api返回的是wav格式的音频文件,这个格式的文件有些不通用,因此需要转换成mp3格式的文件. ...
Shell数值比较
Shell数值比较比较描述 n1 -eq n2 检查n1是否与n2相等 n1 -ge n2 检查n1是否大于或等于n2 n1 -gt n2 检查n1是否大于n2 n1 -le n2 检查n1是否小 ...
21. SCHEMATA
21. SCHEMATA 在MySQL中,SCHEMA是数据库,因此SCHEMATA表提供有关数据库的信息. SCHEMATA表有以下列: CATALOG_NAME :SCHEMA所属目录的名称.该值 ...
docker使用阿里云镜像仓库docker
1:阿里云docker仓库 https://dev.aliyun.com/search.html 2:进去注册帐号后,点击自己的管理中心. 3:在管理中心点击加速器,右边面板会有你的加速地址,右边面板 ...
CentOS6.8下安装Docker
原文章链接https://www.cnblogs.com/baolong/p/5743420.html. 由于在自己安装的虚拟机上打开linux终端命令行输入uname -a 以及cat /etc/r ...
又见GCD （已知最大公约数和其中一个数求另一个数）
#include<cstdio> int f1(int a,int b) //最大公约数 { ) return b; else return f1(b,a%b); } int f2(int ...
负载均衡之Ocelot+Consul(配置文件注册服务)
继上篇 Ocellot 做负载均衡之后,本篇将记录 Ocelot + Consul 试验如何做服务发现和服务注册. 服务发现和服务注册的背景知识,一搜满街都是. 在此,我还是写下自己对这个术语的理解吧 ...
Java学习之接口概念
Java语言只支持单重继承,不支持多继承,即一个类只能有一个父类.但是在实际应用中,又经常需要使用多继承来解决问题.为了解决该问题,Java语言提供接口来实现类的多继承问题. 接口(英文interfa ...
react native 标签出错.
这种错误为标签错误,没办法,你只能往标签上找了,但不一定是<Text></Text>,我是在<TextInput></TextInput>上出错的,多了 ...

javascript/jquery模板引擎——Handlebars初体验

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

随机推荐

热门专题