介绍
Handlebars.js 是一个基于 Mustache 模板语法的 JavaScript 模板引擎，它允许您利用模板生成 HTML、XML 或其他格式的文本。通过使用 Handlebars.js，您可以轻松地通过数据和模板创建动态 Web 页面。
安装
要使用 Handlebars.js，需要在项目中安装它。您可以使用 Node.js 的包管理器 npm 进行安装，打开终端并执行以下命令：
npm install handlebars
基本使用
下面是一个简单的示例，将一个模板应用于一些数据并呈现结果：
-- -------------------- ---- -------
-- -- -------------
----- ---------- - ----------------------
-- ----
----- ------ - ---------- -- ---- -- --------- - -- ---- ------------- - ---- - -
---------------- ---------- -
-------------------------- -- ----------------------------
----- -------- - ---------------------------
-- ----
----- ---- - -
----- -------
--------- ----------- ----
----- -
- ----- -------- ---- ---- --
- ----- -------- ---- --- -
-
--
----- ------ - ---------------
-- ----
--------------------输出结果如下：
<p>Hello, my name is Alan. I am from Somewhere, TX. I have 2 kids:</p> <ul><li>Jimmy is 12</li><li>Sally is 4</li></ul>
模板语法
Handlebars.js 的模板语法遵循 Mustache 规范，它使用双大括号（{{}}）表示占位符。以下是一些常用的模板语法：
变量
使用 {{变量名}} 表示输出变量的值，例如：
<p>Hello, {{name}}!</p>在渲染时传入的数据应该包含一个 name 属性，例如：
const data = { name: 'Alan' };
const result = template(data);
// 输出：<p>Hello, Alan!</p>块级别标签
块级别标签允许您根据条件或循环来控制模板的输出。以下是三个最常见的块级别标签：
if
使用 {{#if condition}}...{{/if}} 表示当 condition 为真时输出内容，例如：
{{#if isAdmin}}
<p>Welcome, admin!</p>
{{/if}}unless
与 if 相反，使用 {{#unless condition}}...{{/unless}} 表示当 condition 为假时输出内容，例如：
{{#unless isLoggedIn}}
<p>Please log in.</p>
{{/unless}}each
使用 {{#each array}}...{{/each}} 循环遍历数组并输出内容，例如：
<ul>
{{#each items}}
<li>{{this}}</li>
{{/each}}
</ul>在渲染时传入的数据应该包含一个 items 属性，其值为一个数组，例如：
const data = { items: ['apple', 'banana', 'orange'] };
const result = template(data);
// 输出：<ul><li>apple</li><li>banana</li><li>orange</li></ul>另外，您可以使用 {{@index}} 和 {{@key}} 获取当前元素的索引或键名。
子表达式
子表达式允许您在模板内部执行更复杂的表达式。使用 {{(expression)}} 表示子表达式，例如：
{{capitalize (concat firstName " " lastName)}}上面的表达式将会首先将 firstName 和 lastName 拼接成一个字符串，然后再把它的
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/32397