Handlebars学习笔记

Handlebars是什么

Handlebars是javascript的一个模板引擎，所谓模板引擎是为了帮助开发人员有效的将前端代码显示层和数据层相分离。如果你希望将后台传进来的json数据对象转化成页面显示的内容，通常使用如下方法：

 var person = { name: "Lily", age: 22, sex: "femal" };
            ul = $("<ul></ul>").append("<li>" + person.name + "</li>").append("<li>" + person.age + "</li>").append("<li>" + person.sex + "</li>");

以上代码是想把person数据生成html标签，这样的解法非常简单，但对于后期维护的同事来说肯定很抓狂，哪怕json数据复杂一点点。这个时候handlebars就很好的帮我们把数据层和显示层相分离。

Handlebars的优点

缺少逻辑，兼容Mustache，保留了Mustache的{{value}}。
预编译，执行效率高，功能丰富

Handlebars怎么运行

安装使用
可以在官网http://handlebarsjs.com/下载Handlebars，是个纯js库，因此你可以像使用其他js脚本一样用script标签来包含handlebars.js

2. Handlebars的表达式

1 <li>{{fullname}}</li>
2 <li>{{site}}</li>    //Handlebars的表达式加两个花括号{{value}}

以上每一个花括号属性将会返回json数据对象中定义属性对应的值。如果你的json数据包含html标签，它将会溢出(escape)不被解析

var context = {'fullname': "<b>Terry li</b>", site: '<a href="http://gbin1.com">gbin1.com</a>'};
var html    = template(context);

生成的html内容如下：

<ul>
   <li>GBin1</li>
   <li>&lt;a href=&quot;http://www.gbin1.com&quot;&gt;gbin1.com&lt;/a&gt;</li>
</ul>

如果你希望生成html那样的格式,请使用如下代码：

<li>{{fullname}}</li>
<li>{{{site}}}</li>

使用三个花括号{{{value}}}将可以避免溢出，得到的结果如下：

<ul><li>GBin1</li><li><a href="http://www.gbin1.com">gbin1.com</a></li></ul>

3. handlebars模版

 1 <script id="entry-template" type="text/x-handlebars-template">
 2   /*template content 这里放置模板内容
 3   {<ul><li>{{title}}</li><li>{{body}}</li></ul> 9 **/
10 </script>

以上代码中，我们定义一个模板名称叫：my-template，你可以自己定义名称。并且类型使用 text/x-handlebars-template。

4.编译模板

1 <script>
2 $(function(){
3 var source   = $("#entry-template").html();
4 var template = Handlebars.compile(source);  //编译模板
5 var context = {title: "My New Post", body: "This is my first post!"}; //模拟json数据
6 var html    = template(context);
7 })
8 </script>

结果如下：

1 <ul>
2   <li>My New Post</li>
3   <li>This is my first post!<li>
4 </ul>

5.Handlebars的内建辅助方法(helper)

使用handlebars最强大的一点在于你可以使用handlebars生成自己需要的辅助方法。通过这个方法你可以生成类似，if...else...或者each等等逻辑表单式。

他自身提供了很多辅助方法供我们选择，这里我选择几个常用的讲解

each

完整的demo如下：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>HanderBarx学习笔记</title>
 6     <script src="scripts/jquery.min.js"></script>
 7     <script src="scripts/handlebars-v1.3.0.js"></script>
 8     <script id="template" type="text/x-handlebars-template">
 9         <ul>
10             {{#each people}}
11             <li>{{this}}</li>
12             {{/each}}
13         </ul>
14     </script>
15     <script>
16         $(function () {
17             var source = $("#template").html();
18             var template = Handlebars.compile(source);
19             var context = {people: ["Lucy","Lily","Jack"]};
20             var html = template(context);
21             $("#result").html(html);
22         })
23     </script>
24 </head>
25 <body>
26     <div id="result"></div>
27 </body>
28 </html>

View Code

each辅助方法可以帮助我们将所有的属性对应的数组数据取出来。

if...else...

下面的demo我们在each方法中套用if...else...

完整的demo如下：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>HanderBarx学习笔记</title>
 6     <script src="scripts/jquery.min.js"></script>
 7     <script src="scripts/handlebars-v1.3.0.js"></script>
 8     <script id="template" type="text/x-handlebars-template">
 9         <ul>
10             {{#each people}}
11               {{#if this}}
12                <li>{{this}}</li>
13               {{else}}
14                 <li>not found</li>
15               {{/if}}
16             {{/each}}
17         </ul>
18     </script>
19     <script>
20         $(function () {
21             var source = $("#template").html();
22             var template = Handlebars.compile(source);
23             var context = {people: ["Lucy","Lily","Jack",null,undefined,""]};
24             var html = template(context);
25             $("#result").html(html);
26         })
27     </script>
28 </head>
29 <body>
30     <div id="result"></div>
31 </body>
32 </html>

View Code

以上代码中，如果this为false的话，将执行else下的代码。

自定义内辅助方法：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>HanderBarx学习笔记</title>
 6     <script src="scripts/jquery.min.js"></script>
 7     <script src="scripts/handlebars-v1.3.0.js"></script>
 8     <script id="template" type="text/x-handlebars-template">
 9         <ul>
10            <li>{{parseInt str}}</li>
11         </ul>
12     </script>
13     <script>
14         $(function () {
15             var source = $("#template").html();
16             var template = Handlebars.compile(source);
17             Handlebars.registerHelper("parseInt", function (str) {
18                 return parseInt(str);
19             })
20             var context = {str:"22.33"};
21             var html = template(context);
22             $("#result").html(html);
23         })
24     </script>
25 </head>
26 <body>
27     <div id="result"></div>
28 </body>
29 </html>

View Code