JavaScript語義模板庫handlebars教程

原創 阿桃子 2020-06-13 08:54

前言

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操作）：

 

1<div id="list">
2</div>
01<script
 id="people-template" type="text/x-handlebars-template">
02  {{#people}}
03    <div class="person">
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>
08    </div>
09  {{/people}}
10</script>



在JavaScript文件中添加預編譯函數和數據：

 

01$(document).ready(function()
 {
02   
03  //
 compile our template
04  var template =
 Handlebars.compile($("#people-template").html());
05   
06  var
 data = {
07    people:
 [
08      {
 first_name: "Alan",
 last_name: "Johnson",
 phone: "1234567890",
 email: "[email protected]",
 member_since: "Mar
 25, 2011" },
09      {
 first_name: "Allison",
 last_name: "House",
 phone: "0987654321",
 email: "[email protected]",
 member_since: "Jan
 13, 2011" },
10      {
 first_name: "Nick",
 last_name: "Pettit",
 phone: "9836592272",
 email: "[email protected]",
 member_since: "Apr
 9, 2009" },
11      {
 first_name: "Jim",
 last_name: "Hoskins",
 phone: "7284927150",
 email: "[email protected]",
 member_since: "May
 21, 2010" },
12      {
 first_name: "Ryan",
 last_name: "Carson",
 phone: "8263729224",
 email: "[email protected]",
 member_since: "Nov
 1, 2008" }
13    ]
14  };
15   
16  $('#list').html(template(data));
17});

 

完整的demo代碼：

 

01<!DOCTYPE
 html>
02<html>
03  <head>
04    <title>Handlebars
 Expressions Example</title>
05  </head>
06  <body>
07    <h1>Handlebars
 Expressions Example!</h1>
08<!--this is
 a list which will rendered by handlebars template.   
 --> 
09    <div id="list">
10    </div>
11     
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>
14     
15    <script
 id="people-template" type="text/x-handlebars-template">
16      {{#people}}
17        <div class="person">
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>
22        </div>
23      {{/people}}
24    </script>
25     
26    <script
 type="text/javascript">
27      $(document).ready(function()
 {
28         
29        //
 compile our template
30        var template =
 Handlebars.compile($("#people-template").html());
31         
32        var
 data = {
33          people:
 [
34            {
 first_name: "Alan",
 last_name: "Johnson",
 phone: "1234567890",
 email: "[email protected]",
 member_since: "Mar
 25, 2011" },
35            {
 first_name: "Allison",
 last_name: "House",
 phone: "0987654321",
 email: "[email protected]",
 member_since: "Jan
 13, 2011" },
36            {
 first_name: "Nick",
 last_name: "Pettit",
 phone: "9836592272",
 email: "[email protected]",
 member_since: "Apr
 9, 2009" },
37            {
 first_name: "Jim",
 last_name: "Hoskins",
 phone: "7284927150",
 email: "[email protected]",
 member_since: "May
 21, 2010" },
38            {
 first_name: "Ryan",
 last_name: "Carson",
 phone: "8263729224",
 email: "[email protected]",
 member_since: "Nov
 1, 2008" }
39          ]
40        };
41         
42        $('#list').html(template(data));
43      });
44    </script>
45  </body>
46</html>

Block expressions使用方法

使用Block expressions可以改變js的上下文來調用／渲染模板。

例如，我們使用helper創建一個HTML list

 

1<script
 id="people-template" type="text/x-handlebars-template">
2    {{#list
 people}}
3        {{first_name}}
 {{last_name}}  {{phone}} {{email}} {{member_since}}
4    {{/list}}
5</script>

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代碼：

 

01<!DOCTYPE
 html>
02<html>
03  <head>
04    <title>Handlebars
 Block Expressions Example</title>
05  </head>
06  <body>
07    <h1>Handlebars
 Expressions Example!</h1>
08<!--this is
 a list which will rendered by handlebars template.   
 --> 
09    <div id="list">
10    </div>
11     
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>
14     
15    <script
 id="people-template" type="text/x-handlebars-template">
16        {{#list
 people}}
17            {{first_name}}
 {{last_name}}  {{phone}} {{email}} {{member_since}}
18        {{/list}}
19    </script>
20     
21    <script
 type="text/javascript">
22      $(document).ready(function()
 {
23         
24        //
 compile our template
25        var template =
 Handlebars.compile($("#people-template").html());
26 
27        Handlebars.registerHelper('list',
 function (items, options) {
28            var
 out = "<div>";
29 
30            for (var
 i = 0, l = items.length; i < l; i++) {
31                out
 = out + "<div>" +
 options.fn(items[i]) + "</div>";
32            }
33 
34            return out
 + "</div>";
35        });
36 
37        var
 data = {
38          people:
 [
39            {
 first_name: "Alan",
 last_name: "Johnson",
 phone: "1234567890",
 email: "[email protected]",
 member_since: "Mar
 25, 2011" },
40            {
 first_name: "Allison",
 last_name: "House",
 phone: "0987654321",
 email: "[email protected]",
 member_since: "Jan
 13, 2011" },
41            {
 first_name: "Nick",
 last_name: "Pettit",
 phone: "9836592272",
 email: "[email protected]",
 member_since: "Apr
 9, 2009" },
42            {
 first_name: "Jim",
 last_name: "Hoskins",
 phone: "7284927150",
 email: "[email protected]",
 member_since: "May
 21, 2010" },
43            {
 first_name: "Ryan",
 last_name: "Carson",
 phone: "8263729224",
 email: "[email protected]",
 member_since: "Nov
 1, 2008" }
44          ]
45        };
46         
47        $('#list').html(template(data));
48      });
49    </script>
50  </body>
51</html>

With Expressions 使用方法

一般情況下，Handlebars模板會在編譯的階段的時候進行context傳遞和賦值。使用with的方法，我們可以將context轉移到數據的一個section裏面（如果你的數據包含section）。這個方法在操作複雜的template時候非常有用。直接看完整的demo代碼：

 

01<!DOCTYPE
 html>
02<html>
03  <head>
04    <title>Handlebars
 Block "with" Expressions
 Example</title>
05  </head>
06  <body>
07    <h1>Handlebars
 Expressions Example!</h1>
08<!--this is
 a list which will rendered by handlebars template.   
 --> 
09    <div id="list">
10    </div>
11     
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>
14     
15    <script
 id="people-template" type="text/x-handlebars-template">
16      {{#people}}
17        <div class="person">
18          <p>{{title}}
19          {{#with
 author}}
20              By
 {{first_name}} {{last_name}}</p>
21          {{/with}}
22        </div>
23      {{/people}}
24    </script>
25     
26    <script
 type="text/javascript">
27      $(document).ready(function()
 {
28         
29        //
 compile our template
30        var template =
 Handlebars.compile($("#people-template").html());
31 
32        var
 data = {
33          people:
 [
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"}, 
 },
38          ]
39        };
40         
41        $('#list').html(template(data));
42      });
43    </script>
44  </body>
45</html>

 

4. 使用Helpers

使用Helpers用戶可以操作handlebars模板中的數據，添加相應的邏輯等等。

用戶自定義Helpers

如本例中，添加formatPhoneNumber helpers，來對電話號碼進行格式統一化。

Template中代碼如下：

 

1{{#people}}
2<div class="person">
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>
7</div>
8{{/people}}

JavaScript中，需要使用Handlebars.registerHelper來註冊helpers，代碼：

 

1//
 add the formatPhoneNumber helper
2Handlebars.registerHelper("formatPhoneNumber",
 function(phoneNumber) {
3  phoneNumber
 = phoneNumber.toString();
4  return "(" +
 phoneNumber.substr(0,3) + ")
 " +
 phoneNumber.substr(3,3) + "-" +
 phoneNumber.substr(6,4);
5});

完整demo代碼：

 

01<!DOCTYPE
 html>
02<html>
03  <head>
04    <title>Handlebars
 Helpers Example</title>
05  </head>
06  <body>
07    <h1>Handlebars
 Helpers Example!</h1>
08     
09    <div id="list">
10    </div>
11     
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>
14     
15    <script
 id="people-template" type="text/x-handlebars-template">
16      {{#people}}
17      <div class="person">
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>
22      </div>
23      {{/people}}
24    </script>
25     
26    <script
 type="text/javascript">
27      $(document).ready(function()
 {
28         
29        //
 compile our template
30        var template =
 Handlebars.compile($("#people-template").html());
31         
32        //
 add the formatPhoneNumber helper
33        Handlebars.registerHelper("formatPhoneNumber",
 function(phoneNumber) {
34          phoneNumber
 = phoneNumber.toString();
35          return "(" +
 phoneNumber.substr(0,3) + ")
 " +
 phoneNumber.substr(3,3) + "-" +
 phoneNumber.substr(6,4);
36        });
37         
38        var
 data = {
39          people:
 [
40            {
 first_name: "Alan",
 last_name: "Johnson",
 phone: "1234567890",
 email: "[email protected]",
 member_since: "Mar
 25, 2011" },
41            {
 first_name: "Allison",
 last_name: "House",
 phone: "0987654321",
 email: "[email protected]",
 member_since: "Jan
 13, 2011" },
42            {
 first_name: "Nick",
 last_name: "Pettit",
 phone: "9836592272",
 email: "[email protected]",
 member_since: "Apr
 9, 2009" },
43            {
 first_name: "Jim",
 last_name: "Hoskins",
 phone: "7284927150",
 email: "[email protected]",
 member_since: "May
 21, 2010" },
44            {
 first_name: "Ryan",
 last_name: "Carson",
 phone: "8263729224",
 email: "[email protected]",
 member_since: "Nov
 1, 2008" }
45          ]
46        };
47         
48        $('#list').html(template(data));
49      });
50    </script>
51  </body>
52</html>

If helpers用法

if helpers使用方法很簡單，只需要在template中添加{{if}}, 如果有else，也一樣，添加{{else}}。Template中代碼如下：

 

01{{#people}}
02  <div class="person">
03    <p>{{title}}
04    {{#if author}}
05       {{author.first_name}}
 {{author.last_name}}</p>
06    {{else}}
07       Unknown
 Author</p>
08    {{/if}}
09  </div>
10{{/people}}

 

Each helpers 用法

使用each方法，可以在template中添加{{this}}, 用each來遍歷在data中是所有數據。Template中代碼如下：

 

1{{#each
 people}}
2  <div class="person">
3      {{this}}
4  </div>
5{{/each}}

  

5. 使用partials

當你想要複用模板的一部分，或者將長模板分割成爲多個模板方便維護時，partials就派上用場了。直接看代碼比較直接，母模板定義如下：其中用>partials 來包含相應的子模板。

1<script
 id="people-template" type="text/x-handlebars-template">
2  {{#each
 people}}
3    {{>
 person}}
4  {{/each}}
5</script>

子模板代碼：

 

1<script
 id="person-partial" type="text/x-handlebars-template">
2  <div class="person">
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>
7  </div>
8</script>

JavaScript中需要用Handlebars.registerPartial對子模板進行註冊，代碼如下：

 

01//
 compile our template
02var template =
 Handlebars.compile($("#people-template").html());
03 
04//
 add the person partial
05Handlebars.registerPartial("person",
 $("#person-partial").html());
06 
07var
 data = {
08  people:
 [
09    {
 first_name: "Alan",
 last_name: "Johnson",
 phone: "1234567890",
 email: "[email protected]",
 member_since: "Mar
 25, 2011" },
10    {
 first_name: "Allison",
 last_name: "House",
 phone: "0987654321",
 email: "[email protected]",
 member_since: "Jan
 13, 2011" },
11    {
 first_name: "Nick",
 last_name: "Pettit",
 phone: "9836592272",
 email: "[email protected]",
 member_since: "Apr
 9, 2009" },
12    {
 first_name: "Jim",
 last_name: "Hoskins",
 phone: "7284927150",
 email: "[email protected]",
 member_since: "May
 21, 2010" },
13    {
 first_name: "Ryan",
 last_name: "Carson",
 phone: "8263729224",
 email: "[email protected]",
 member_since: "Nov
 1, 2008" }
14  ]
15};
16 
17$('#list').html(template(data));

所有demo代碼下載地址： https://github.com/DaweiCheng/handlebarstutor 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章