本文介绍了Handlebars，一个JavaScript语义模板库，强调其无逻辑模板特性和预加载能力。详细讲解了基础用法，包括基础语法和Block Helper的使用，如each、if/else和with。此外，还探讨了自定义Block Helper的注册和取消注册方法，展示了不同的输出效果。
简介
Handlebars是 JavaScript 一个语义模板库，它采用无逻辑模板的思路，支持预加载，语法简单，可使用Block Helper扩充功能。
基础语法：{{ }}是Handlebars的基本单元，在Handlebars中称之为Mustache，其中可以书写对象，{{{ }}}和{{ }}功能相似，其额外功能是其中的内容不会被转义。
基础用法
<!DOCTYPE HTML>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
</head>
<body>
<!-- 声明一个容器 -->
<div id="container">
</div>
<!-- 声明一个模板 -->
<script id="template1" type="text/x-handlebars-template">
<!-- 不使用this也可以 --->
<div>{{this.name}}</div>
<div>{{this.age}}</div>
<div>{{this.span}}</div>
<div>{{{this.span}}}</div>
</script>
<!-- 编写javascript代码 -->
<script type="text/javascript">
//定义一个context
var context = {name: "tom",age: 20,span: "<span style='color:red'>span1</span>"};
//获取模板中的内容
var source1 = $("#template1").html();
//编译,并得到一个模板对象（该对象是一个函数）
var template1 = Handlebars.compile(source1);
//注入context,得到注入值后的html
var html = template1(context);
//将得到的html追加到container中
$("#container").append($(html));
</script>
</body>
</html>
输出结果：
Block Helper
Block Helper可以称为block表达式，可以对一些表达式做更高级的操作。
基本语法：{{#name}} {{/name}}以#开头，name代表Block Helper的名称，其后可以跟参数，/表示结尾
内置Block Helper
each Block Helper
可以用来遍历集合元素
<!DOCTYPE HTML>
<html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
</head>
<body>
<!-- 声明一个容器 -->
<div id="container">
</div>
<!-- 声明一个模板 -->
<script id="template1" type="text/x-handlebars-template">
<ul>
{{#each people}}
<!-- @index表示当前遍历的下标，从零开始 -->
<li>{{@index}} {{firstName}} {{lastName}}</li>
{{/each}}
</ul>
</script>
<!-- 编写javascript代码 -->
<script type="text/javascript">
//定义一个context
var context = {
people: [
{firstName: "Yehuda", lastName: "Katz"},
{firstName: "Carl", lastName: "Lerche"},
{firstName: "Alan", lastName: "Johnson"}]
};
//获取模板中的内容
var source1 = $("#template1").html();
//编译,并得到一个模板对象（该对象是一个函数）
var template1 = Handlebars.compile(source1);
//注入context,得到注入值后的html
var html = template1(context);
//将得到的html追加到container中
$("#container").append($(html));
</script>
</body>
</html>
输出结果
if else block helper
可以做逻辑判断，只能判断布尔值，不能判断表达式
<!DOCTYPE HTML>
<html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
</head>
<body>
<!-- 声明一个容器 -->
<div id="container">
</div>
<!-- 声明一个模板 -->
<script id="template1" type="text/x-handlebars-template">
{{#if isTrue}}
<div>结果为正确</div>
{{else}}
<div>结果为错误</div>
{{/if}}
{{#if isFalse}}
<div>结果为正确</div>
{{else}}
<div>结果为错误</div>
{{/if}}
</script>
<!-- 编写javascript代码 -->
<script type="text/javascript">
//定义一个context
var context = {isTrue: true,isFalse: false};
//获取模板中的内容
var source1 = $("#template1").html();
//编译,并得到一个模板对象（该对象是一个函数）
var template1 = Handlebars.compile(source1);
//注入context,得到注入值后的html
var html = template1(context);
//将得到的html追加到container中
$("#container").append($(html));
</script>
</body>
</html>
输出结果
with block helper
可以进行context的传递和赋值
<!DOCTYPE HTML>
<html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
</head>
<body>
<!-- 声明一个容器 -->
<div id="container">
</div>
<!-- 声明一个模板 -->
<script id="template1" type="text/x-handlebars-template">
<div>编号：{{id}}</div>
<div>
{{#with info}}
<p>姓名：{{name}}</p>
<p>年龄：{{age}}</p>
{{/with}}
</div>
</script>
<!-- 编写javascript代码 -->
<script type="text/javascript">
//定义一个context
var context = {id:1,info:{name:"tom",age:20}};
//获取模板中的内容
var source1 = $("#template1").html();
//编译,并得到一个模板对象（该对象是一个函数）
var template1 = Handlebars.compile(source1);
//注入context,得到注入值后的html
var html = template1(context);
//将得到的html追加到container中
$("#container").append($(html));
</script>
</body>
</html>
输出结果
自定义Block Helper
通过Handlebars.registerHelper("",function(data, options){ })注册一个Block Helper，
通过Handlebars.unregisterHelper(" ")取消注册一个Block Helper
<!DOCTYPE HTML>
<html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
</head>
<body>
<!-- 声明一个容器 -->
<div id="container">
</div>
<!-- 声明一个模板 -->
<script id="template1" type="text/x-handlebars-template">
{{!使用自定义Block Helper}}
{{#list people class="green"}}
{{firstName}} {{lastName}}
{{/list}}
</script>
<!-- 编写javascript代码 -->
<script type="text/javascript">
//自定义Block Helper
//第一个参数为注册block helper的名字，第二个参数为回调函数(参数1：对应模板中的people,参数2：handlebars提供的对象)
Handlebars.registerHelper('list', function(items, options) {
console.log(options);
var out = '<ul>';
for(var i=0; i<items.length; i++) {
//fn函数可以将值注入到Block Helper,并得到赋值之后的html
var item = options.fn(items[i]);
//Block Helper后的属性值（name=value）会被封装成hash对象
out = out + '<li class="'+options.hash.class+'">' + item + '</li>';
}
//在自定义Block Helper中的输出
return out + '</ul>';
});
//定义一个context
var context = {people: [
{firstName: "Yehuda", lastName: "Katz"},
{firstName: "Carl", lastName: "Lerche"},
{firstName: "Alan", lastName: "Johnson"}]
};
//获取模板中的内容
var source1 = $("#template1").html();
//编译,并得到一个模板对象（该对象是一个函数）
var template1 = Handlebars.compile(source1);
//注入context,得到注入值后的html
var html = template1(context);
//将得到的html追加到container中
$("#container").append($(html));
</script>
</body>
</html>
输出结果
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
