handlebars 详解及使用

能正青

2023-12-01

1. 前言

handlebars的使用方法和art-template 模板引擎类似，同时支持 NodeJs和浏览器。使用模板引擎的好处就是便于对代码进行维护，同时，使用模板引擎操作DOM，效率也会更高一些。个人觉得还是art-template 比较好用一些，因为工作中使用了handlebars，查看它的官方文档时，使用方法介绍的也不详细，花时间整理了一些它的常用方法，希望会对你有帮助。

如果想了解art-template 模板引擎，可以点击这里查看。

2. 安装

可以在命令行中使用如下命令安装，然后使用require直接引入
npm install handlebars --save

也可以直接下载 js 文件，进入链接 Ctrl+s 保存文件至项目目录中：https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.3/handlebars.min.js

3. 语法

3.1 if/unless 判断

handlebars的 if 判断只能判断 true 和false，不能进行逻辑判断，例如不能对这种 a===2的条件进行判断。
handlebars 的if 在判断前会做类型的转换，只有false、" "、0、NaN、null、undefined 这6种情况下为false，其它的都是true。
unless 的效果跟 if 相反，if 是true的时候返回，unless是false的时候返回。

//if 判断
{{#if user}}
	<h2>{{user.name}}</h2>
{{/if}}

// if else
{{#if user}}
	<h2>{{user.name}}</h2>
{{else}}
	<h2>未登录</h2>
{{/if}}

//多分支
{{#if user}}
	<h2>{{user.name}}</h2>
{{else if ...}}
	<h2>未登录</h2>
{{/if}}

3.2 each 遍历数组

@first，可以用来判断当前是不是第一项；
@last，用来判断当前是不是最后一项；
@index和@key，输出当前的下标，从0开始；
this，表示当前传进来的数据；

{{#each this}}
	{{#if @first}} First! {{/if}}
	{{@index}} {{@key}}
	{{#if @last}} Last :( {{/if}} 
{{/each}}

例如：

/*html模板*/
{{#each this}}         
	<p>城市：{{city}}，天气：{{weather}}</p>
{{/each}}   

/*数据*/
let array=[
	{city:"北京",weather:"sunshine"},
	{city:"上海",weather:"wind"},
	{city:"天津",weather:"rain"},
	{city:"广州",weather:"snow"},
]      

/*页面输出*/
<p>城市：北京，天气：sunshine</p>
<p>城市：上海，天气：wind</p>
<p>城市：天津，天气：rain</p>
<p>城市：广州，天气：snow</p>

3.3 each 遍历对象

跟遍历数组使用方法类似；
唯一不同的是当遍历对象时，@key 输出对应的键名；
循环中的this 指的是@key对应的value值；

/*html模板*/
{{#each this}}
	<p>{{@key}}：{{this}}</p>
{{/each}} 
     
/*数据*/
let data={
    name:"张三",
    age:"19",
    sex:"男"
}  

/*页面输出*/
<p>name：张三</p>
<p>age：19</p>
<p>sex：男</p>

3.4 each 中获取外层变量

当我们传进来的数据有多层嵌套时，循环内部调用外部的变量，需要在变量前面加../，看下面这个例子：

/*html模板*/
<p>当前是第{{pageNo}}页，显示{{pageSize}}条数据</p>
<ul>
	{{#each pageList}}
		<li><a href="?pagesize={{../pageSize}}&pageNo={{this}}">{{this}}</a></li>
	{{/each}}
</ul>
     
/*数据*/
let data={
    pageNo:1,
    pageSize:5,
    pageList:[1,2,3,4,5,6]
}

/*页面输出*/
<p>当前是第1页，显示5条数据</p>
<ul>
	<li><a href="?pagesize=5&amp;pageNo=1">1</a></li>
	<li><a href="?pagesize=5&amp;pageNo=2">2</a></li>
	<li><a href="?pagesize=5&amp;pageNo=3">3</a></li>
	<li><a href="?pagesize=5&amp;pageNo=4">4</a></li>
	<li><a href="?pagesize=5&amp;pageNo=5">5</a></li>
	<li><a href="?pagesize=5&amp;pageNo=6">6</a></li>
</ul>

3.5 注释

handlebars 模板中的注释可以使用 {{!-- --}}，或者{{! }}，或者。
{{!-- --}} 和 {{! }} 的注释不会出现在生成的代码中；
注释的代码会出现在生成的代码中；

{{#each this}}
	{{!-- 不会出现在生成的代码中--}}
	<!-- 这是注释，会出现在生成的代码中 -->
	<p>序号：{{sequence @index}}，城市：{{city}}</p>
{{/each}}

4. 方法 handlebars.compile(template)

handlebars.compile(template)，编译模板，以便可以立即执行，这个方法返回一个函数，数据需要以参数的形式传进去。
script 标签的type 属性，可以是”text/html"，或者"text/x-handlebars-template"，不能是“text/script"。

html模板内容：

<section class="content-header">
	<script type="text/x-handlebars-template" id="handle_page_title">
		<h1>{{title}}</h1>
	</script>
</section>

js文件内容：

//获取html结构
let source = $("#handle_page_title").html();
//编译成模板
let template = handlebars.compile(source);
//生成完成的html结构
let html = template({title: "这是标题内容"});
//插入dom
$(".content-header").html(html);

最终输出结果：

<section class="content-header">
	<h1>这是标题内容</h1>
</section>

5. helpers

通过Handlebars.registerHelper(name,fn)，可以注册一个全局的方法，第一个参数为全局方法的名称，第二个参数为函数，函数中的参数为后面跟着的变量；
在模板中通过{{name 变量名}}调用该方法，意思是在当前变量输出前，先执行该全局的方法。
可以多次调用全局方法，方便对代码进行维护。

例如each遍历中，如果想让@index从1 开始，我们可以这么做：

/*html模板*/
{{#each this}}
	<p>序号：{{sequence @index}}，城市：{{city}}</p>
{{/each}}

/*数据*/
let array=[
	{city:"北京",weather:"sunshine"},
	{city:"上海",weather:"wind"},
	{city:"天津",weather:"rain"},
	{city:"广州",weather:"snow"},
]
/*js代码*/
//生成列表序号,需要放在handlebars.compile()的前面
Handlebars.registerHelper("sequence", (data) => {
	return data + 1;
})
var source = document.getElementById("tpl").innerHTML;
var html = Handlebars.compile(source)(array);
document.getElementById("content").innerHTML=html;

/*页面输出*/
<p>序号：1，城市：北京</p>
<p>序号：2，城市：上海</p>
<p>序号：3，城市：天津</p>
<p>序号：4，城市：广州</p>