在现代 Web 开发中,模板引擎是一个非常重要的环节。在 Node.js 程序中,可以使用 Handlebars 来进行模板渲染。Handlebars 是一个常用的模板引擎,它基于 Mustache 模板语言,并加入了更为强大的功能,支持嵌套,包含,条件等等。
本文将详细介绍使用 Handlebars 模板引擎的基本用法,并结合代码示例,以便读者更加深入地了解如何在 Node.js 中使用 Handlebars。
安装 Handlebars
在 Node.js 中使用 Handlebars 需要先进行安装,可以使用 npm 进行安装。在控制台输入以下命令:
--- ------- ---------- ------
使用 Handlebars
在安装完成后,可以使用以下方式来使用 Handlebars。
编写 template
用 Handlebars 来编写模板十分简单。这里介绍一个简单的例子:
--------- ----- ------ ------ ----- ---------------- --------- ------------ ------- ------ ------- ------- ------ ----- ------- ----- ------- ------ --------- ------- -------
上面例子中的模板使用了 mustache 语法来插入数据。例如,{{#each posts}} 与 {{/each}} 这一段代码是一个标准的 mustache 语法循环模板。它表示将渲染数据中的 posts 数组。
编写数据源
接下来需要编写数据源,它是一个普通的 JSON 对象,如下:
- -------- - - -------- -------- ---------- ----- -- --- ----- ------ -- - -------- -------- ---------- ----- -- --- ------ ------ - - -
上面的数据源包含了两个文章,每个文章有对应的 title 和 content。
渲染模板
渲染模板也十分简单,只需要读取模板和数据源,然后调用一下 Handlebars.compile() 方法就可以了。
--- ---------- - ---------------------- --- -------- - --------------------------- --- ------- - ------- --------- --- ---- - ------------------ ------------------
以上代码定义了一个数据源 context,然后使用 Handlebars.compile() 方法编译模板,最后将编译好的模板和数据源合并渲染出 HTML。运行结果就是渲染后的 HTML 代码。
使用 partials
Handlebars 提供了 partials 功能,可以将一个模板定义在另一个模板中。这样可以在一个大的模板中拆分成若干个小的模板。例如:
--------- ----- ------ ------ ----- ---------------- --------- ------------ ------- ------ ------- ------- --- ------ --------- ------- -------
上面的模板定义了一组文章,然后通过 {{> post}} 这个语法调用了另一个模板。这个模板需要保存为 post.hbs 文件:
------ ----- ------- ----- ------- ------
以上就是使用 Handlebars 的基本用法,接下来通过代码示例更好地理解他们的使用。
代码示例
我们以一个使用 Handlebars 渲染一个界面的示例来介绍 Handlebars 的用法。
--- ---- - ---------------- --- -- - -------------- --- ---------- - ---------------------- -------------------------- ----- ---- - -- -------- --- ---- - ------------------------ -------- ----- ----- - -- ----- - ----- ---- - --- -------- - ------------------------------------ --- ------- - - ------- ----- -------- - - ------- ------- ------ --- -- - ------- -------- ------ -------- -- - ------- ---------- ------ ---------- - - -- --- ---- - ------------------ ------------------ ---------------- -------------- -------------- --- - ----------------
在这个例子中,我们读取了一个名为 index.hbs 的 Handlebars 模板。然后运用 Handlebars.compile() 方法编译代码并进行渲染,最后将渲染后的 HTML 输出到浏览器。
这个模板将渲染一些菜单项和一段欢迎语,其中包含三个菜单项,分别是 Home、About 和 Contact。
--------- ----- ------ ------ ----- ---------------- ----------------- ---- -------- ------- ------ ----------- -- ---------- --------- ---- ------- ------- ------ -------------------------------- --------- ----- ------- -------
这个模板将对数据进行处理并输出渲染结果。这本质上是一个 HTML 文件,只不过使用了 handlebars 的模板引擎语法来构建一个动态的 HTML 页面。
结论
Handlebars 是一个非常好用的模板引擎,它为我们构建动态 HTML 带来了很大的便利性。在 Node.js 中使用 Handlebars,可以通过 npm 进行安装,渲染模板需要编写模板和数据源,这样就可以进行渲染了。Handlebars 还提供了很多其他的用法,例如 partials,可以大大提高代码的可读性和可维护性。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/670b6aa7d91dce0dc88a516e