Node.js 中如何使用 Handlebars 模板引擎

在现代 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