标签：com http blog style class div img code java c log
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>
Handlebars学习笔记2,码迷,mamicode.com
标签：com http blog style class div img code java c log
原文地址：http://www.cnblogs.com/zengm/p/3699176.html
