在现代 web 开发中，模板渲染是前端开发不可避免的一部分。而 Hapi 是一款 Node.js 框架，可以帮助开发者搭建高性能的 web 应用程序。在本文中，我们将探讨如何在 Hapi 中使用 handlebars 进行模板渲染。
什么是 handlebars？
handlebars 是一种轻量级的模板引擎，其可以使用类似于 HTML 的标记来创建和渲染动态 HTML 内容。handlebars 具有以下的特性：
- 支持嵌套
- 支持表达式
- 支持自定义 helper
同时，handlebars 还有强大的组织结构功能，包括 if/else/each 等条件判断。
集成 handlebars 到 Hapi 中
首先，我们需要在项目中安装 handlebars：
npm install handlebars
然后，我们需要将 handlebars 集成到 Hapi 中。这可以通过安装 handlebars 的 Hapi 插件实现。
npm install hapi-handlebars
在代码中加载插件：
-- -------------------- ---- -------
----- ---- - ----------------------
----- ---------- - ----------------------
----- ------ - ------------------------
----- -------------- - ---------------------------
----- ------ - --- -------------
----- ------------
----- ----
---
----- ---- - ----- -- -- -
----- ------------------------
----- -----------------
------- ---------------
-------- -
---------- --------
------- -----
----------- ----------
------------- -----------------
------------ ---------------
-
---
-
--------------
------- ------
----- ----
-------- --------- -- -- -
------ --------------- -
------ -----------
-------- -------- -- -- ---------
---
-
---
-------------- -- -
---------------
-------------- -- -
-------------------
---在上述代码中，我们首先引入 Handlebars、Vision 和 HapiHandlebars。然后，我们定义了服务器实例，并且在 async 函数中注册了 Vision 插件和 HapiHandlebars 插件。注意，我们已经设置了选项，以便 handlebars 可以在应用程序中找到开发人员所需的所有文件。最后，我们还定义了一个路由，其中使用 .view() 方法向客户端发送一个渲染过的 handlebars 模板。
创建 handlebars 模板
接下来，我们需要创建 handlebars 模板文件。在本例中，我们将创建一个 index.hbs 文件，该文件将包含我们的主页内容。下面是一个例子：
-- -------------------- ---- -------
--------- -----
------
------
------------------------
-------
------
--------------------
-------
-------在上述代码中，我们定义了一个基本的 HTML 页面结构，并使用了 handlebars 语法将标题和消息插入到 HTML 中。
handlebars 的 helper
在 handlebars 的 helper 中，我们可以通过一些条件判断命令来控制渲染的 HTML 内容。
例如，在 index.hbs 中，我们可以使用 if 命令来检查变量是否存在。
-- -------------------- ---- -------
--------- -----
------
------
------------------------
-------
------
----- ---------
--------------------
--------
----------- -- -- -------------
-------
-------
-------在上述代码中，{{#if message}} 检查变量 message 是否存在。如果存在，则进行渲染。否则，将会显示欢迎信息。
还可以使用 each 命令在列表中循环。
{{#each cats}}
<p>Name: {{this.name}}, Age: {{this.age}}</p>
{{/each}}在上述代码中，我们通过 each 命令循环列表 cats。在每一次循环中，我们渲染了一个 HTML 段落，其中包含猫的名称和年龄。
结论
在本文中，我们已经学习了如何使用 handlebars 进行模板渲染，并集成到 Hapi 中。我们还学习了 handlebars 的一些特性，如嵌套、表达式和条件判断。我们使用了 if 和 each 命令，对渲染的 HTML 进行了一些控制和操作，使这些内容更具有实用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67140c8cad1e889fe211ec86