介绍
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 拼接成一个字符串，然后再把它的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32397
