Handlebars学习笔记2

时间：2014-04-30 18:03:50 收藏：0 阅读：402

Handlebars是什么

Handlebars是javascript的一个语义编译模板，它可以兼容Mustache，引入的Mustache可以获得Handlebars的一些额外功能。

Handlebars语句

1 <div class="entry">
2   <h1>{{title}}</h1>    //Handlebars的语句是从花括号开始{{内容}}
3   <div class="body">
4     {{body}}
5   </div>
6 </div>

Handlebars预编译

1.安装：可以在官网http://handlebarsjs.com/下载Handlebars，是个js文件，所以可以像引用js文件一样，把这个放在head标签内

2.预编译模块

 1 <script id="entry-template" type="text/x-handlebars-template">
 2   /*template content 这里放置模板内容
 3   <div class="entry">
 4   <h1>{{title}}</h1>
 5   <div class="body">
 6     {{body}}
 7   </div>
 8 </div>
 9 **/
10 </script>

3.编译模板

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 <div class="entry">
2   <h1>My New Post</h1>
3   <div class="body">
4     This is my first post!
5   </div>
6 </div>

HTML溢出(Escaping)

1  <div class="entry">  
2   <h1>{{title}}</h1>
3    <div class="body">
4     {{{body}}}  //json数据如下{title:"<p>hello</p>"，body:"<p>world<p>"}
5   </div>
6  </div>

结果如下：

1.<p>hello<p>  //title的值

2.world    //body的值

注意json数据含有html标签的话，使用{{value}}，它将被escape并且不被解析，如果你希望生成html的话就使用{{{value}}}这种形式的。

Block expressions

使用Block expressions是从{{#helperName options}}这种模式开始的，{{/helperName}}结束的

使用一个helper创建一个模

1 {{#list people}}{{firstName}} {{lastName}}{{/list}}  //json数据如下{
2   people: [
3     {firstName: "Yehuda", lastName: "Katz"},
4     {firstName: "Carl", lastName: "Lerche"},
5     {firstName: "Alan", lastName: "Johnson"}
6   ]
7 }

list helper代码如下

1 Handlebars.registerHelper(‘list‘, function(items, options) {
2   var out = "<ul>";        //list helper传进两个参数，第1个参数为person，第2个参数为options，包含fn属性
3   for(var i=0, l=items.length; i<l; i++) {
4     out = out + "<li>" + options.fn(items[i]) + "</li>";
5   }
6 
7   return out + "</ul>";
8 });

结果:

<ul>
  <li>Yehuda Katz</li>
  <li>Carl Lerche</li>
  <li>Alan Johnson</li>
</ul>

完整的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="my-template" type="text/x-handlebars-template">
 9         {{#list people}}{{firstname}}{{lastName}}{{/list}}
10     </script>
11     <script>
12         $(function () {
13             var source = $("#my-template").html();
14             var template = Handlebars.compile(source);
15             //list helper
16             Handlebars.registerHelper(‘list‘, function (item, options) { //people作为第一个参数，options作为第二个参数，包含一个fn属性
17                 var out = "<ul>";
18                 for (var i = 0; i < item.length; i++) {
19                     out = out + "<li>" + options.fn(item[i]) + "</li>";
20                 }
21                 return out + "</ul>";
22             })
23             var context = { people: [{ firstName: "Yehuda", lastName: "Kate" }, {firstName:"Carl",lastName:"Lech"}]}
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

Handlebars学习笔记2,码迷,mamicode.com