Handlebars的使用方法文档整理(Handlebars.js)
2014-11-18 11:12
579 查看
Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用;
Handlebars.js和Mustache 的区别
目前版本为 2.0.0, 无压缩的情况下目测是 3000行源代码,约 200kb;下面这个是基本的模版表达式,
其中 {{ 和 }} 之间为handlerbars的变量;
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>查看更多表达式的用法
把数据放到自己定义的
<script>标签中;
<script id="entry-template" type="text/x-handlebars-template"> template content </script>
编译模版
使用Handlebars.compile进行编译模版;
var source = $("#entry-template").html();
var template = Handlebars.compile(source);智能编译模版(在移动端也能运行哦么么哒)
更多有关预编译的链接(Precompilation)
生成html代码
通过上面的模版和数据混合编译后的结果:var context = {title: "标题", body: "我是字符串!"}
var html = template(context);JS生成的结果如下:
<div class="entry"> <h1>标题</h1> <div class="body"> 我是字符串! </div> </div>
更多template选项
//代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>
<div id="div1"></div>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div></script>
<script>
//JS代码
var source = $("#entry-template").html(); var template = Handlebars.compile(source);
var context = {title: "标题", body: "我是字符串!"} var html = template(context);document.getElementById("div1").innerHTML = html;
</script>
</body>
</html>
//模版的代码和JS的代码如防止HTML被转义的方法;
{{ }}和 {{{}}}和区别就是, 如果你不希望变量里面的字符串被转义就使用{{{ }}}对变量进行处理;
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{{body}}}
</div>
</div>数据如下：
{
title: "All about <p> Tags",
body: "<p>This is a post about <p> tags</p>"
}定义的Helper如下
Handlebars.registerHelper('link', function(text, url) {
text = Handlebars.Utils.escapeExpression(text);
url = Handlebars.Utils.escapeExpression(url);
var result = '<a href="' + url + '">' + text + '</a>';
return new Handlebars.SafeString(result);
});渲染以后的结果如下：
<div class="entry"> <h1>All About <p> Tags</h1> <div class="body"> <p>This is a post about <p> tags</p> </div> </div>
//代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>
<div id="div2"></div>
<script id="entry-template1" type="text/x-handlebars-template">
<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{{body}}} </div> </div></script>
<script>
Handlebars.registerHelper('link', function(text, url) { text = Handlebars.Utils.escapeExpression(text); url = Handlebars.Utils.escapeExpression(url); var result = '<a href="' + url + '">' + text + '</a>'; return new Handlebars.SafeString(result); });var source = $("#entry-template1").html();
var template = Handlebars.compile(source);
var context = {
title: "All about <p> Tags",
body: "<p>This is a post about <p> tags</p>"
};
var html = template(context);
document.getElementById("div2").innerHTML = html;
</script>
</body>
</html>
Handlerbars的自定义表达式
块表达式允许你定义 helpers 生成自定义的HTML,下面这个是JS的模版;{{#list people}}{{firstName}} {{lastName}}{{/list}}如果你使用下面的数据:
{
people: [
{firstName: "Yehuda", lastName: "Katz"},
{firstName: "Carl", lastName: "Lerche"},
{firstName: "Alan", lastName: "Johnson"}
]
}在JS里面定义这个helper;
Handlebars.registerHelper('list', function(items, options) {
var out = "<ul>";
for(var i=0, l=items.length; i<l; i++) {
out = out + "<li>" + options.fn(items[i]) + "</li> " ; /*options.fn相当于一个编译的函数*/
}
return out + "</ul>";
});执行以后的结果是:
<ul> <li>Yehuda Katz</li> <li>Carl Lerche</li> <li>Alan Johnson</li> </ul>
自定义块表达式还有很多别的特性, 比如可以直接使用 IF 和 ELSE；
Learn More: Block Helpers
//代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>
<div id="div3"></div>
<script id="entry-template2" type="text/x-handlebars-template">
{{! 这个是模版的注释 }}
{{#list people}}{{firstName}} {{lastName}}{{/list}}</script>
<script>
Handlebars.registerHelper('list', function(items, options) { var out = "<ul>"; for(var i=0, l=items.length; i<l; i++) { out = out + "<li>" + options.fn(items[i]) + "</li> " ; /*options.fn相当于一个编译的函数*/ } return out + "</ul>"; });
var source = $("#entry-template2").html();
var template = Handlebars.compile(source);
var context = {
people: [
{firstName: "Yehuda", lastName: "Katz"},
{firstName: "Carl", lastName: "Lerche"},
{firstName: "Alan", lastName: "Johnson"}
]
};
var html = template(context);
document.getElementById("div3").innerHTML = html;
</script>
</body>
</html>
Handlebars次级数据的渲染
Handlebars支持简单的下级对象获取和上级对象获取, 跟 Mustache一样样的.<p>{{name}}</p>Handlebars 也支持多层次的数据展示, 模版如下.
<div class="entry">
<h1>{{title}}</h1>
<h2>By {{author.name}}</h2>
<div class="body">
{{body}}
</div>
</div>下面这个是要使用到的Handlebars的 数据;
var context = {
title: "My First Blog Post!",
author: {
id: 47,
name: "Yehuda Katz"
},
body: "My first post. Wheeeee!"
};代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>
<div id="div4">
</div>
<script id="entry-template3" type="text/x-handlebars-template">
<div class="entry"> <h1>{{title}}</h1> <h2>By {{author.name}}</h2> <div class="body"> {{body}} </div> </div></script>
<script>
var source = $("#entry-template3").html();
var template = Handlebars.compile(source);
var context = { title: "My First Blog Post!", author: { id: 47, name: "Yehuda Katz" }, body: "My first post. Wheeeee!" };var html = template(context);
document.getElementById("div4").innerHTML = html;
</script>
</body>
</html>
Handlebars 可以迭代Object对象(纯对象或者数组); 在模版中的../是对象的父级;
<h1>Comments</h1>
<div id="comments">
{{#each comments}}
<h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2>
<div>{{body}}</div>
{{/each}}
</div>下面展示的name都是同样的东西;
<p>{{./name}} or {{this/name}} or {{this.name}}</p> Handlebars模版中的注释可以使用 {{!-- --}} 或者 {{! }}或者 <!-- -->.
可以把模版专用的注释写在模版文件里面么么哒. 提高代码的可读性, 这个也算是最佳实践吧;<div class="entry">
{{!-- only output this author names if an author exists --}}
{{#if author}}
<h1>{{firstName}} {{lastName}}</h1>
{{/if}}
</div>{{!-- --}}和{{! }}的注释不会出现在生成的代码中; 如果使用 <!-- --> 注释的代码会出现在生成的代码中;
<div class="entry">
{{! This comment will not be in the output }}
<!-- This comment will be in the output -->
</div>自定义标签(Helpers)
Handlebars的自定义标签可以使用在Handlebars模版的任何地方,必须使用Handlebars.registerHelper注册到即可; 上代码:
<div class="post">
<h1>By {{fullName author}}</h1>
<div class="body">{{body}}</div>
<h1>Comments</h1>
{{#each comments}}
<h2>By {{fullName author}}</h2>
<div class="body">{{body}}</div>
{{/each}}
</div>这个是要用到的data
var context = {
author: {firstName: "Alan", lastName: "Johnson"},
body: "I Love Handlebars",
comments: [{
author: {firstName: "Yehuda", lastName: "Katz"},
body: "Me too!"
}]
};
//就是下面这个helper提供了模版中的自定义标签;
Handlebars.registerHelper('fullName', function(person) {
return person.firstName + " " + person.lastName;
});生成的结果如下:
<div class="post"> <h1>By Alan Johnson</h1> <div class="body">I Love Handlebars</div> <h1>Comments</h1> <h2>By Yehuda Katz</h2> <div class="body">Me Too!</div> </div>
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>
<div id="div5"></div>
<script id="entry-template5" type="text/x-handlebars-template">
<div class="post"> <h1>By {{fullName author}}</h1> <div class="body">{{body}}</div> <h1>Comments</h1> {{#each comments}} <h2>By {{fullName author}}</h2> <div class="body">{{body}}</div> {{/each}} </div></script>
<script>
var context = { author: {firstName: "Alan", lastName: "Johnson"}, body: "I Love Handlebars", comments: [{ author: {firstName: "Yehuda", lastName: "Katz"}, body: "Me too!" }] }; //就是下面这个helper提供了模版中的自定义标签; Handlebars.registerHelper('fullName', function(person) { return person.firstName + " " + person.lastName; });
var source = $("#entry-template5").html();
var template = Handlebars.compile(source);
var html = template(context);
document.getElementById("div5").innerHTML = html;
</script>
</body>
</html>
在自定义标签的Helper可以使用this, this是当前的对象;
<ul>
{{#each items}}
<li>{{agree_button}}</li>
{{/each}}
</ul>这个是填充的数据和定义的Helpers:
var context = {
items: [
{name: "Handlebars", emotion: "love"},
{name: "Mustache", emotion: "enjoy"},
{name: "Ember", emotion: "want to learn"}
]
};
Handlebars.registerHelper('agree_button', function() {
var emotion = Handlebars.escapeExpression(this.emotion),
name = Handlebars.escapeExpression(this.name);
return new Handlebars.SafeString(
"<button>I agree. I " + emotion + " " + name + "</button>"
);
});生成的结果如下:
<ul> <li><button>I agree. I love Handlebars</button></li> <li><button>I agree. I enjoy Mustache</button></li> <li><button>I agree. I want to learn Ember</button></li> </ul>
如果你希望你返回的HTML代码不被转义, 就要在定义的Helper中返回 new Handlebars.SafeString;
return new Handlebars.SafeString(代码)
自定义标签(Helpers)的更多信息;
Handlebars 提供if 在模版中进行简单的逻辑处理; 以及迭代处理的标签
each .
自定义helper的更多信息
//例子代码段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>
<div id="div6"></div>
<script id="entry-template6" type="text/x-handlebars-template">
{{#list people}}{{firstName}} {{lastName}}{{/list}}</script>
<script>
var context = {
people: [
{firstName: "Yehuda", lastName: "Katz"},
{firstName: "Carl", lastName: "Lerche"},
{firstName: "Alan", lastName: "Johnson"}
]
};
Handlebars.registerHelper('list', function(items, options) {
var out = "<ul>";
for(var i=0, l=items.length; i<l; i++) {
out = out + "<li>" + options.fn(items[i]) + "</li>";
}
return out + "</ul>";
});
var source = $("#entry-template6").html();
var template = Handlebars.compile(source);
var html = template(context);
document.getElementById("div6").innerHTML = html;
</script>
</body>
</html>
//handlebars的IF ELSE语句和 each语句的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>
<div id="div7"></div>
<script id="entry-template7" type="text/x-handlebars-template">
{{#if haveIf}}我有If{{else}}我没有If{{/if}};
{{#each arr}}
<p>{{this.a}} > > <span>this.data</span></p>
{{/each}}
{{!迭代这条对象}}
{{#each test}}
{{!如果满足条件就打印第一个模版， 如果不满足条件就打印第二个模版, helper做的只是对数据进行判断而已}}
{{#inverse}}
<p>{{this.direct}}</p>
{{else}}
<p>inverse:{{this.inverse}}</p>
{{/inverse}}
{{/each}}
</script>
<script>
var context = {
haveIf : true,
arr : [
{ a : "a" , data : "___a"},
{ a : "b" , data : "___b"},
{ a : "c" , data : "___c"}
],
test : [
{
condition : true,
direct : "打印dir"
},
{
condition : false,
direct : "dir",
inverse : "打印inverse"
}
]
};
Handlebars.registerHelper('inverse', function(options) {
if( this.condition ) {
return options.fn(this);
}else{
return options.inverse(this);
}
});
var source = $("#entry-template7").html();
var template = Handlebars.compile(source);
var html = template(context);
document.getElementById("div7").innerHTML = html;
</script>
</body>
</html>更多handlebars的API查看
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js模版引擎handlebars.js实用教程——each-基本循环使用方法
- WdatePicker.js的使用方法 帮助文档 使用说明(时间控件)
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- popus.js弹出模式页面使用方法整理总结
- 【cocos2d-js官方文档】二十四、如何在android平台上使用js直接调用Java方法
- WdatePicker.js的使用方法 帮助文档 使用说明(时间控件)
- WdatePicker.js的使用方法 帮助文档 使用说明(时间控件)
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- WdatePicker.js的使用方法 帮助文档 使用说明 如何使用
- js模版引擎handlebars.js实用教程——each-循环中使用this
- 【cocos2d-js官方文档】二十三、如何在IOS平台上使用js直接调用OC方法
- a 中调用js的几种方法整理及使用推荐
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- JS截取字符串常用方法整理及使用示例
- js模版引擎handlebars.js实用教程——循环中使用索引
- WdatePicker.js的使用方法 帮助文档 使用说明 如何使用
- 【转】WdatePicker.js的使用方法 帮助文档 使用说明 如何使用
- WdatePicker.js的使用方法 帮助文档 使用说明(时间控件)
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- Handlebars.js循环中索引(@index)使用技巧(访问父级索引)