Handlebars.js 是 JavaScript 一个语义模板库, 通过对view和data的分离来快速构建Web模板. 它采用”Logic-less template”（无逻辑模版）的思路, 在加载时被预编译, 而不是到了客户端执行到代码时再去编译, 这样可以保证模板加载和运行的速度. Handlebars.js兼容Mustache, 你可以在Handlebars.js中导入Mustache模板.
Handlebars.js的安装十分简单, 只要从Github下载最新版本:https://github.com/wycats/Handlebars.js或通过访问官网获取:http://Handlebars.js.com. 目前Handlebars.js已经被许多项目广泛使用了, Handlebars.js是一个纯JS库, 因此你可以像使用其他JS脚本一样用script标签来包含Handlebars.js.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Handlebars Demo 2</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/handlebars-v2.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//用jquery获取模板
var source = $("#tpl").html();
//预编译模板
var template = Handlebars.compile(source);
//模拟json数据
var context = { name: "Handlebars", content: "This is the Handlebars.js demo 2"};
//匹配json内容
var html = template(context);
//输入模板
$("body").html(html);
});
</script>
</head>
<body>
<script id="tpl" type="text/x-handlebars-template">
<div class="demo">
<h1>{{name}}</h1>
<p>{{content}}</p>
</div>
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Handlebars Demo 3</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/handlebars-v2.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//用jquery获取模板
var source = $("#tpl").html();
//预编译模板
var template = Handlebars.compile(source);
//模拟json数据
var context = {
tools: [
{lib: "Backbone"},
{lib: "JQuery"},
{lib: "Handlebars"}
]
};
//匹配json内容
var html = template(context);
//输入模板
$("body").html(html);
});
</script>
</head>
<body>
<script id="tpl" type="text/x-handlebars-template">
<ul>
{{#tools}}
<li>{{lib}}</li>
{{/tools}}
</ul>
</script>
</body>
</html>
Handlebars可以从任何上下文访问一个模板，你可以使用Handlebars.registerHelper()方法来注册一个helper.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Handlebars Demo 4</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>
<script type="text/javascript" src="js/handlebars-v2.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
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>"
);
});
//用jquery获取模板
var source = $("#tpl").html();
//预编译模板
var template = Handlebars.compile(source);
//模拟json数据
var context = {
items: [
{name: "Handlebars", emotion: "love"},
{name: "Mustache", emotion: "enjoy"},
{name: "Ember", emotion: "want to learn"}
]
};
//匹配json内容
var html = template(context);
//输入模板
$("body").html(html);
});
</script>
</head>
<body>
<script type="text/template" id="tpl">
<ul>
{{#each items}}
<li>{{agree_button}}</li>
{{/each}}
</ul>
</script>
</body>
</html>
Handlebars的注释写法: {{! handlebars comments }}.
把下面一段”debug helper”加载到你的JavaScript代码里,然后在模板文件里通过{{debug}}或是{{debug someValue}}方便调试数据
Handlebars.registerHelper("debug", function(optionalValue) {
console.log("Current Context");
console.log("====================");
console.log(this);
if (optionalValue) {
console.log("Value");
console.log("====================");
console.log(optionalValue);
}
});