如何用Handlebars模板引擎实现疑问？
摘要：Handlebars.js下载地址：http:handlebarsjs.com 最近自己在建一个站，采用完全的前后端分离的方式，现在正在做前端的部分。其中有项功能是需要ajax调用后端接口，返回json数据后要动态的插入数据。但是一开
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/