Handlebars.js下載地址：http://handlebarsjs.com/
最近自己在建一個站，采用完全的前后端分離的方式，現在正在做前端的部分。其中有項功能是需要ajax調用后端接口，返回json數據后要動態的插入數據。但是一開始我自己是用最"傳統"的通過js拼接html字符串，然后再用jq插入到頁面中的方式。比如說下面的這個例子，我要顯示一個個人信息卡：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Index</title>
6 <script src="js/jquery.js"></script>
7 <style>
8 .person {
9 font-size:40px;
10 float:left;
11 padding:20px;
12 margin:30px;
13 background-color:pink;
14 }
15 </style>
16 </head>
17
18 <body>
19 <div class = "person" id="person_info">
20 </div>
21 </body>
22
23 <script>
24 var data = { 25 name:'約翰莫里森', 26 home:'美國', 27 job:'摔跤手'
28 }; 29
30 var str = ""; 31 str += "<div>姓名：" + data.name + "</div>"; 32 str += "<div>出生地：" + data.home + "</div>"; 33 str += "<div>職業：" + data.job + "</div>"; 34
35 $('#person_info').html(str); 36 </script>
37 </html>
這里我得用自己"手動"拼接html字符串，況且這只是一個極其簡單的例子，如果標簽之間的嵌套、屬性復雜的話，這種方式寫起來相當的麻煩，且標簽間沒有層次結構，可讀性和維護性極差。
后來偶然在個地方了解到了模板引擎，從此這種工作一下簡便了許多！ 先看下用Handlebars完成上面的例子是如何操作的：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Handlebars</title>
6 <script src="js/jquery.js"></script>
7 <script src="js/handlebars.js"></script>
8 <style>
9 .person {
10 font-size:40px;
11 float:left;
12 padding:10px;
13 margin-left:30px;
14 background-color:pink;
15 }
16 </style>
17 </head>
18
19 <body>
20 <div id = "person_info">
21 <div class = "person">
22 <div>姓名：{{name}}</div>
23 <div>出生地：{{home}}</div>
24 <div>職業：{{job}}</div>
25 </div>
26 </div>
27 </body>
28
29 <script>
30 var data ={ 31 name:'約翰莫里森', 32 home:'美國', 33 job:'摔跤手'
34 }; 35
36 var tmpl = $('#person_info').html();
37
38 var func = Handlebars.compile(tmpl);
39
40 var result = func(data);
41
42 $('#person_info').html(result);
43 </script>
44
45 </html>
先從最下面的js代碼講起，核心代碼就這四句：
1 var tmpl = $('#person_info').html(); 2 var func = Handlebars.compile(tmpl); 3 var result = func(data); 4 $('#person_info').html(result);
第一行的 var tmpl = $('#person_info').html(); 就只是基本的jq語法；<body>中<div id="person_info">塊中的就是html模板，這里取得了該div塊下的html模板內容(對象tmpl)。此時如果用console.log(tmpl)打印該對象的話，得到的內容是
1 <div class = "person">
2 <div>姓名：{{name}}</div>
3 <div>出生地：{{home}}</div>
4 <div>職業：{{job}}</div>
5 </div>
用兩個大括號括起來的變量名會在后面 向函數傳入數據(下面會提到) 時進行匹配。
第二行 var func = Handlebars.compile(tmpl); 通過Handlebars的compile()對剛剛取得的html模板進行預編譯，返回的是一個函數(現在對象func即為該函數)。
var result = func(data); 這個函數帶有一個參數，該參數為用以匹配模板用的數據。我這里事先寫死一個數據對象data，然后傳入該函數內。返回值是匹配好的html內容，打印出來就是 ：
1 <div class = "person">
2 <div>姓名：約翰莫里森</div>
3 <div>出生地：美國</div>
4 <div>職業：摔跤手</div>
5 </div>
最后用jq將內容插入到頁面中： $('#person_info').html(result);
如果有多項數據需要展示，則需要用到{{#each this}} {{/each}}。 語法類似標簽，所以要注意別漏了閉合標簽{{/each}}。 {{#each this}} ... {{/each}}中間的內容是模板。this 則是指傳入函數的數據data。 用在實現上述例子的代碼如下：
1 <body> 2 <div id = "person_info"> 3 {{#each this}} 4 <div class = "person"> 5 <div>姓名：{{name}}</div> 6 <div>出生地：{{home}}</div> 7 <div>職業：{{job}}</div> 8 </div> 9 {{/each}} 10 </div> 11 </body> 12 13 <script> 14 var data =[{ 15 name:'約翰莫里森', 16 home:'美國', 17 job:'摔跤手' 18 }, 19 { 20 name:'Faker', 21 home:'韓國', 22 job:'英雄聯盟職業選手' 23 }]; 24 25 var tmpl = $('#person_info').html(); 26 var func = Handlebars.compile(tmpl); 27 var result = func(data); 28 $('#person_info').html(result); 29 </script>
如果對象間所包含的數據域有個別不同，則需要分支語句進行判斷 即{{#if xxx}} {/if}}。 用例如下：
1 <body> 2 <div id = "person_info"> 3 {{#each this}} 4 <div class = "person"> 5 <div>姓名：{{name}}</div> 6 <div>出生地：{{home}}</div> 7 <div>職業：{{job}}</div> 8 {{#if life}} 9 <div>生涯經歷：</div> 10 <ul> 11 {{#each life}} 12 <li>{{this}}</li> 13 {{/each}} 14 </ul> 15 {{/if}} 16 </div> 17 {{/each}} 18 </div> 19 </body> 20 21 <script> 22 var data =[{ 23 name:'約翰莫里森', 24 home:'美國', 25 job:'摔跤手' 26 }, 27 { 28 name:'Faker', 29 home:'韓國', 30 job:'英雄聯盟職業選手', 31 life:['S3世界總冠軍','S4世界總冠軍','S5世界總冠軍'] 32 }]; 33 34 var tmpl = $('#person_info').html(); 35 console.log(tmpl); 36 var func = Handlebars.compile(tmpl); 37 var result = func(data); 38 $('#person_info').html(result); 39 </script>
最后再附上一篇關於Handlebars語法比較詳細的介紹：http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/