前言
Web应用开发正在处于一个快速发展的时期,随着HTML5规范的落实和普及,相信会有越来越多的优秀的web应用呈现出来。JavaScript是web应用开发中是非常重要的语言,该语言有很多流行的库供大家使用。本期给大家介绍语义模板库Handlebars的使用方法。
本文示例代码已经全部上传GitHub:https://github.com/DaweiCheng/handlebarstutor 也欢迎大家积极贡献更多示例代码。
目录
1. Handlebars介绍
2. 安装和使用
3. 使用expressions
4. 使用helpers
5. partials
1. Handlebars介绍
Handlebars是JavaScript一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译,这样可以保证模板加载和运行的速度。Handlebars兼容Mustache,你可以在Handlebars中导入Mustache模板。
2. 安装和使用
Handlebars的安装非常简单,你只需要从Github下载最新版本,你也可访问下面网址获取最新信息:http://handlebarsjs.com/。 目前handlebars.js已经被许多项目广泛使用了,handlebars是一个纯JS库,因此你可以像使用其他JS脚本一样用script标签来包含handlebars.js:
1 | <script type= "text/javascript" src= "script/handlebars-1.0.0.beta.6.js" ></script> |
3. 使用expressions
Handlebars expressions是handlebars模板中最基本的单元,使用方法是加两个花括号{{value}}, handlebars模板会自动匹配相应的数值,对象甚至是函数。
基本expressions使用方法:
在HTML网页中,添加需要使用模板的地方(目前Handlebars仅支持id操作):
01 | <script id= "people-template" type= "text/x-handlebars-template" > |
04 | <h2>{{first_name}} {{last_name}}</h2> |
05 | < div class = "phone" >{{phone}}</ div > |
06 | < div class = "email" ><a href= "mailto:{{email}}" >{{email}}</a></ div > |
07 | < div class = "since" >User since {{member_since}}</ div > |
在JavaScript文件中添加预编译函数和数据:
01 | $(document).ready(function() { |
04 | var template = Handlebars.compile($( "#people-template" ).html()); |
08 | { first_name: "Alan" , last_name: "Johnson" , phone: "1234567890" , email: "alan@test.com" , member_since: "Mar 25, 2011" }, |
09 | { first_name: "Allison" , last_name: "House" , phone: "0987654321" , email: "allison@test.com" , member_since: "Jan 13, 2011" }, |
10 | { first_name: "Nick" , last_name: "Pettit" , phone: "9836592272" , email: "nick@test.com" , member_since: "Apr 9, 2009" }, |
11 | { first_name: "Jim" , last_name: "Hoskins" , phone: "7284927150" , email: "jim@test.com" , member_since: "May 21, 2010" }, |
12 | { first_name: "Ryan" , last_name: "Carson" , phone: "8263729224" , email: "ryan@test.com" , member_since: "Nov 1, 2008" } |
16 | $( '#list' ).html( template (data)); |
完整的demo代码:
04 | <title>Handlebars Expressions Example</title> |
07 | <h1>Handlebars Expressions Example!</h1> |
08 | <!-- this is a list which will rendered by handlebars template . --> |
12 | <script type= "text/javascript" src= "script/jquery.js" ></script> |
13 | <script type= "text/javascript" src= "script/handlebars-1.0.0.beta.6.js" ></script> |
15 | <script id= "people-template" type= "text/x-handlebars-template" > |
18 | <h2>{{first_name}} {{last_name}}</h2> |
19 | < div class = "phone" >{{phone}}</ div > |
20 | < div class = "email" ><a href= "mailto:{{email}}" >{{email}}</a></ div > |
21 | < div class = "since" >User since {{member_since}}</ div > |
26 | <script type= "text/javascript" > |
27 | $(document).ready(function() { |
30 | var template = Handlebars.compile($( "#people-template" ).html()); |
34 | { first_name: "Alan" , last_name: "Johnson" , phone: "1234567890" , email: "alan@test.com" , member_since: "Mar 25, 2011" }, |
35 | { first_name: "Allison" , last_name: "House" , phone: "0987654321" , email: "allison@test.com" , member_since: "Jan 13, 2011" }, |
36 | { first_name: "Nick" , last_name: "Pettit" , phone: "9836592272" , email: "nick@test.com" , member_since: "Apr 9, 2009" }, |
37 | { first_name: "Jim" , last_name: "Hoskins" , phone: "7284927150" , email: "jim@test.com" , member_since: "May 21, 2010" }, |
38 | { first_name: "Ryan" , last_name: "Carson" , phone: "8263729224" , email: "ryan@test.com" , member_since: "Nov 1, 2008" } |
42 | $( '#list' ).html( template (data)); |
Block expressions使用方法
使用Block expressions可以改变js的上下文来调用/渲染模板。
例如,我们使用helper创建一个HTML list
1 | <script id= "people-template" type= "text/x-handlebars-template" > |
3 | {{first_name}} {{last_name}} {{phone}} {{email}} {{member_since}} |
JavaScript文件中数据如下:
var template = Handlebars.compile($("#people-template").html());
Handlebars.registerHelper('list', function (items, options) {
var out = "<div>";
for (var i = 0, l = items.length; i < l; i++) {
out = out + "<div>" + options.fn(items[i]) + "</div>";
}
return out + "</div>";
});
添加一个名叫list的helper,funcitons(items, options)传入两个参数, data中的people作为第一个参数传入,options作为第二个参数传入,options附带属性fn,使用fn可以调用该模块的内容。
完整的demo代码:
04 | <title>Handlebars Block Expressions Example</title> |
07 | <h1>Handlebars Expressions Example!</h1> |
08 | <!-- this is a list which will rendered by handlebars template . --> |
12 | <script type= "text/javascript" src= "script/jquery.js" ></script> |
13 | <script type= "text/javascript" src= "script/handlebars-1.0.0.beta.6.js" ></script> |
15 | <script id= "people-template" type= "text/x-handlebars-template" > |
17 | {{first_name}} {{last_name}} {{phone}} {{email}} {{member_since}} |
21 | <script type= "text/javascript" > |
22 | $(document).ready(function() { |
25 | var template = Handlebars.compile($( "#people-template" ).html()); |
27 | Handlebars.registerHelper( 'list' , function (items, options) { |
30 | for (var i = 0, l = items.length; i < l; i++) { |
31 | out = out + "<div>" + options.fn(items[i]) + "</div>" ; |
34 | return out + "</div>" ; |
39 | { first_name: "Alan" , last_name: "Johnson" , phone: "1234567890" , email: "alan@test.com" , member_since: "Mar 25, 2011" }, |
40 | { first_name: "Allison" , last_name: "House" , phone: "0987654321" , email: "allison@test.com" , member_since: "Jan 13, 2011" }, |
41 | { first_name: "Nick" , last_name: "Pettit" , phone: "9836592272" , email: "nick@test.com" , member_since: "Apr 9, 2009" }, |
42 | { first_name: "Jim" , last_name: "Hoskins" , phone: "7284927150" , email: "jim@test.com" , member_since: "May 21, 2010" }, |
43 | { first_name: "Ryan" , last_name: "Carson" , phone: "8263729224" , email: "ryan@test.com" , member_since: "Nov 1, 2008" } |
47 | $( '#list' ).html( template (data)); |
With Expressions 使用方法
一般情况下,Handlebars模板会在编译的阶段的时候进行context传递和赋值。使用with的方法,我们可以将context转移到数据的一个section里面(如果你的数据包含section)。这个方法在操作复杂的template时候非常有用。直接看完整的demo代码:
04 | <title>Handlebars Block "with" Expressions Example</title> |
07 | <h1>Handlebars Expressions Example!</h1> |
08 | <!-- this is a list which will rendered by handlebars template . --> |
12 | <script type= "text/javascript" src= "script/jquery.js" ></script> |
13 | <script type= "text/javascript" src= "script/handlebars-1.0.0.beta.6.js" ></script> |
15 | <script id= "people-template" type= "text/x-handlebars-template" > |
20 | By {{first_name}} {{last_name}}</p> |
26 | <script type= "text/javascript" > |
27 | $(document).ready(function() { |
30 | var template = Handlebars.compile($( "#people-template" ).html()); |
34 | { title: "first people: " , author: {first_name: "Alan" , last_name: "Johnson" }, }, |
35 | { title: "second people: " , author: {first_name: "Jack" , last_name: "een" }, }, |
36 | { title: "third people: " , author: {first_name: "Tom" , last_name: "Peter" }, }, |
37 | { title: "fourth people: " , author: {first_name: "Asn" , last_name: "Smith" }, }, |
41 | $( '#list' ).html( template (data)); |
4. 使用Helpers
使用Helpers用户可以操作handlebars模板中的数据,添加相应的逻辑等等。
用户自定义Helpers
如本例中,添加formatPhoneNumber helpers,来对电话号码进行格式统一化。
Template中代码如下:
3 | <h2>{{first_name}} {{last_name}}</h2> |
4 | < div class = "phone" >{{formatPhoneNumber phone}}</ div > |
5 | < div class = "email" ><a href= "mailto:{{email}}" >{{email}}</a></ div > |
6 | < div class = "since" >User since {{member_since}}</ div > |
JavaScript中,需要使用Handlebars.registerHelper来注册helpers,代码:
2 | Handlebars.registerHelper( "formatPhoneNumber" , function(phoneNumber) { |
3 | phoneNumber = phoneNumber.toString(); |
4 | return "(" + phoneNumber.substr(0,3) + ") " + phoneNumber.substr(3,3) + "-" + phoneNumber.substr(6,4); |
完整demo代码:
04 | <title>Handlebars Helpers Example</title> |
07 | <h1>Handlebars Helpers Example!</h1> |
12 | <script type= "text/javascript" src= "script/jquery.js" ></script> |
13 | <script type= "text/javascript" src= "script/handlebars-1.0.0.beta.6.js" ></script> |
15 | <script id= "people-template" type= "text/x-handlebars-template" > |
18 | <h2>{{first_name}} {{last_name}}</h2> |
19 | < div class = "phone" >{{formatPhoneNumber phone}}</ div > |
20 | < div class = "email" ><a href= "mailto:{{email}}" >{{email}}</a></ div > |
21 | < div class = "since" >User since {{member_since}}</ div > |
26 | <script type= "text/javascript" > |
27 | $(document).ready(function() { |
30 | var template = Handlebars.compile($( "#people-template" ).html()); |
33 | Handlebars.registerHelper( "formatPhoneNumber" , function(phoneNumber) { |
34 | phoneNumber = phoneNumber.toString(); |
35 | return "(" + phoneNumber.substr(0,3) + ") " + phoneNumber.substr(3,3) + "-" + phoneNumber.substr(6,4); |
40 | { first_name: "Alan" , last_name: "Johnson" , phone: "1234567890" , email: "alan@test.com" , member_since: "Mar 25, 2011" }, |
41 | { first_name: "Allison" , last_name: "House" , phone: "0987654321" , email: "allison@test.com" , member_since: "Jan 13, 2011" }, |
42 | { first_name: "Nick" , last_name: "Pettit" , phone: "9836592272" , email: "nick@test.com" , member_since: "Apr 9, 2009" }, |
43 | { first_name: "Jim" , last_name: "Hoskins" , phone: "7284927150" , email: "jim@test.com" , member_since: "May 21, 2010" }, |
44 | { first_name: "Ryan" , last_name: "Carson" , phone: "8263729224" , email: "ryan@test.com" , member_since: "Nov 1, 2008" } |
48 | $( '#list' ).html( template (data)); |
If helpers用法
if helpers使用方法很简单,只需要在template中添加{{if}}, 如果有else,也一样,添加{{else}}。Template中代码如下:
05 | {{author.first_name}} {{author.last_name}}</p> |
Each helpers 用法
使用each方法,可以在template中添加{{this}}, 用each来遍历在data中是所有数据。Template中代码如下:
5. 使用partials
当你想要复用模板的一部分,或者将长模板分割成为多个模板方便维护时,partials就派上用场了。直接看代码比较直接,母模板定义如下:其中用>partials 来包含相应的子模板。
1 | <script id= "people-template" type= "text/x-handlebars-template" > |
子模板代码:
1 | <script id= "person-partial" type= "text/x-handlebars-template" > |
3 | <h2>{{first_name}} {{last_name}}</h2> |
4 | < div class = "phone" >{{phone}}</ div > |
5 | < div class = "email" ><a href= "mailto:{{email}}" >{{email}}</a></ div > |
6 | < div class = "since" >User since {{member_since}}</ div > |
JavaScript中需要用Handlebars.registerPartial对子模板进行注册,代码如下:
02 | var template = Handlebars.compile($( "#people-template" ).html()); |
05 | Handlebars.registerPartial( "person" , $( "#person-partial" ).html()); |
09 | { first_name: "Alan" , last_name: "Johnson" , phone: "1234567890" , email: "alan@test.com" , member_since: "Mar 25, 2011" }, |
10 | { first_name: "Allison" , last_name: "House" , phone: "0987654321" , email: "allison@test.com" , member_since: "Jan 13, 2011" }, |
11 | { first_name: "Nick" , last_name: "Pettit" , phone: "9836592272" , email: "nick@test.com" , member_since: "Apr 9, 2009" }, |
12 | { first_name: "Jim" , last_name: "Hoskins" , phone: "7284927150" , email: "jim@test.com" , member_since: "May 21, 2010" }, |
13 | { first_name: "Ryan" , last_name: "Carson" , phone: "8263729224" , email: "ryan@test.com" , member_since: "Nov 1, 2008" } |
17 | $( '#list' ).html( template (data)); |
所有demo代码下载地址: https://github.com/DaweiCheng/handlebarstutor