Handlebars.js 是一个流行的 JavaScript 模板引擎，它使用简单的模板语法来将数据渲染成 HTML。在开发前端应用程序时，经常需要使用模板引擎来动态生成用户界面。然而，在使用 Handlebars.js 时，一些开发者可能会遇到一个问题：如何正确地解析对象？
问题描述
在 Handlebars.js 中，可以使用双大括号（{{}}）来包裹变量名，以便从数据对象中提取值。
例如，有一个数据对象 person：
const person = {
name: 'Alice',
age: 26
}我们可以使用 Handlebars.js 将其渲染成 HTML：
<p>{{name}} is {{age}} years old.</p>这将生成以下 HTML：
<p>Alice is 26 years old.</p>
但是，如果试图将对象作为数组 [对象] 处理，可能会出现问题。例如，考虑以下数据：
-- -------------------- ---- -------
----- ------ - -
-
----- ------
---- --
--
-
----- ----------
---- --
-
-如果我们想要使用 Handlebars.js 将每个人的信息渲染成 HTML 列表，我们可能会尝试以下代码：
<ul>
{{#people}}
<li>{{name}} is {{age}} years old.</li>
{{/people}}
</ul>然而，这将不会生成任何 HTML。这是因为 Handlebars.js 不会自动迭代对象中的数组。相反，它期望您将数组作为上下文提供。
解决方案
为了解决这个问题，我们可以在模板中使用 each 帮助程序迭代数组。例如：
<ul>
{{#each people}}
<li>{{name}} is {{age}} years old.</li>
{{/each}}
</ul>这将按预期生成以下 HTML：
<ul> <li>Bob is 30 years old.</li> <li>Charlie is 35 years old.</li> </ul>
请注意，我们使用 each 来迭代 people 数组，并将每个人的信息渲染成一个列表项。
另外，在这个例子中，我们没有使用 {{#people}}，而是使用 {{#each people}}。这是因为 each 帮助程序迭代数组，所以我们需要将数组名称作为参数传递给 each。
示例代码
为了帮助更好地理解如何在 Handlebars.js 中正确处理对象，以下是一个示例程序，说明如何从数据对象和数组中提取值：
-- -------------------- ---- -------
----- ------ - -
------------------
----------------------
----------------
----
------- --------
------------ -- ------- ----- ---------
---------
-----
-
----- ---- - -
------ -------------- ---------
------------ ----- -- - ------ ------- -- ----------------
------- -
-
----- ------
---- --
--
-
----- ----------
---- --
-
-
-
----- -------- - --------------------------
----- ------ - --------------
----------------------- - ------在此示例中，我们定义了一个模板字符串 source，其中包含了从数据对象和数组中提取值的示例代码。然后，我们将数据对象 data 传递给 Handlebars.js 的 compile 方法，并生成一个可重用的模板 template。最后，我们将渲染结果插入到页面的 <body> 元素中。
结论
使用 Handlebars.js 来处理对象可以让你更轻松地生成动态的用户界面。但要记住，当处理数组时，您需要使用
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14284