一、基本步骤
1.获取模板块的内容 <script>标签的type 为text/x-handlebars-template
2.handlebars预编译模板
3.匹配数据，插入html
二、基本概念
数据里是字符串就直接显示，函数直接执行
.运算符
html转义 要通过{{{}}}才能让html标签起作用，不然html标签就会被编译成字符串。
<div id="wrap"><div>
<script src="handlebars-v3.0.3.js"></script> <!-- 模板--> <script id="template" type="text/x-handlebars-template"> <div> <h1>{{{title}}}</h1> <div>{{fn}}</div> <div>{{data.value}}</div> </div> </script> <script>
//获取模板内容 var sourse = document.getElementById('template').innerHTML,
//预编译 template = Handlebars.compile(sourse),
content = { title:'<a href="javascript:">handlebars</a>', fn:function(){ return 'str'; }, data:{ label:'数据', value:[1,2,3] }, block:{ name:['Tom','Lucy'] } };var html = template(content); document.getElementById('wrap').innerHTML = html; </script>
三、块级表达式
{{#表达式}}{{/表达式}}
<ul> {{#programme}} <li>{{language}}</li> {{/programme}} </ul> 有如下json数据 { programme: [ {language: "JavaScript"}, {language: "HTML"}, {language: "CSS"} ] } 编译结果 <ul> <li>JavaScript</li> <li>HTML</li> <li>CSS</li> </ul>
四、内置块级表达式
each if else unless
each 循环中{{@index}}表示当前的index值（从0开始）
this 指当前的数据对象
五、自定义helper
Handlebars.registerHelper()方法来注册一个helper
<!DOCTYPE html>
<html>
<head>
<META charset=utf-8">
<title>由于if功力不足引出的Helper - by 杨元</title>
</head>
<body>
<h1>由于if功力不足引出的Helper</h1>
<!--基础html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tableList">
</tbody>
</table>
<!--插件引用-->
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
<!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each student}}
{{#if name}}
{{#compare age 20}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{else}}
<tr>
<td>?</td>
<td>?</td>
<td>?</td>
</tr>
{{/compare}}
{{/if}}
{{/each}}
</script>
<!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = {
"student": [
{
"name": "张三",
"sex": "0",
"age": 23
},
{
"sex": "0",
"age": 22
},
{
"name": "妞妞",
"sex": "1",
"age": 18
}
]
};
//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
var myTemplate = Handlebars.compile($("#table-template").html());
//注册一个比较大小的Helper,判断v1是否大于v2
Handlebars.registerHelper("compare",function(v1,v2,options){
if(v1>v2){
//满足添加继续执行
return options.fn(this);
}else{
//不满足条件执行{{else}}部分
return options.inverse(this);
}
});
//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
$('#tableList').html(myTemplate(data));
});
</script>
</body>
</html>
Handlebars.registerHelper用来定义Helper，它有两个参数，第一个参数是Helper名称，第二个参数是一个回调函数，用来执行核心业务逻辑。本例中的函数，有三个参数，其中前两个参数是需要比较的两个数，第三个参数是固定的，就叫options，如果加了该参数，就说明这个Helper是一个Block，块级别的Helper，有一定的语法结构，调用的时候加#号，就像if那样。
关于options的使用，return options.fn(this);表示满足条件继续执行，也就是执行{{#compare }}和{{else}}之间的代码；return options.inverse(this);表示不满足条件，也就是执行{{else}}和{{/compare}}之间的代码。
options.fn(context)当前数据对象的context
options.inverse 相反作用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>handlebars</title>
</head>
<body>
<div id="wrap"></div>
<script src="handlebars-v3.0.3.js"></script>
<script id="template" type="text/x-handlebars-template">
<div id="wrap">
<h1>{{{title}}}</h1>
<div>{{fn}}</div>
<div>{{data.value}}</div>
</div>
<ul>
{{#block}}
{{#each name}}
<li>{{this}}</li>
<li>{{@index}}</li>
{{/each}}
{{/block}}
</ul>
<ul>
{{#with block}}
<li>{{name}}</li>
<li>{{name}}</li>
{{/with}}
</ul>
<ul>
{{#with block}}
<li>{{../title}}</li>
{{/with}}
</ul>
{{debug}}
</script>
<script>
window.onload = function(){
var sourse = document.getElementById('template').innerHTML,
template = Handlebars.compile(sourse),
content = {
title:'<a href="javascript:">handlebars</a>',
fn:function(){ return 'str'; },
data:{ label:'数据', value:[1,2,3] },
block:{ name:['Tom','Lucy'] }
};
//注意registerHelper的位置 因为没有options所有是行内块级表达式 可以不用# Handlebars.registerHelper('debug',function(){ console.log('------------------'); }); var html = template(content); document.getElementById('wrap').innerHTML = html; } </script> </body> </html>