Handlebars学习笔记2

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

Handlebars是什么

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

Handlebars语句

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

Handlebars预编译

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

 2.预编译模块

mamicode.com,码迷
 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>
mamicode.com,码迷

3.编译模板

mamicode.com,码迷
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>
mamicode.com,码迷

结果如下:

mamicode.com,码迷
1 <div class="entry">
2   <h1>My New Post</h1>
3   <div class="body">
4     This is my first post!
5   </div>
6 </div>
mamicode.com,码迷

HTML溢出(Escaping)

mamicode.com,码迷
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>
mamicode.com,码迷

结果如下:

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

2.world
//body的值

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

Block expressions

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

使用一个helper创建一个模

mamicode.com,码迷
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 }
mamicode.com,码迷

list helper代码如下

mamicode.com,码迷
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 });
mamicode.com,码迷

结果:

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

完整的demo如下:

mamicode.com,码迷
 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

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!