npm 包 engine-plntr-handlebars 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们常常会使用模板引擎来生成 html 页面。而 Handlebars 是一个非常流行的模板引擎，因为它能够轻松生成动态内容，同时还能让模板保持清晰和易于理解。在这里，我们将介绍如何使用 npm 包 engine-plntr-handlebars 来使用 Handlebars 模板引擎。

安装 engine-plntr-handlebars

建议使用 npm 安装 engine-plntr-handlebars

首先，在命令行中执行以下命令进行安装：

npm install engine-plntr-handlebars --save

我们可以使用 --save 标记，将该包保存在项目的 package.json 文件中。这样做可以方便后续的更新和管理。

使用 engine-plntr-handlebars

安装完毕后，我们可以很容易地引入 Handlebars 模板。

引入模板

在模板文件夹中创建一个 handlebars 模板文件，例如：

// index.hbs
<h1>{{title}}</h1>
<p>{{content}}</p>

这将生成一个包含一个标题和一些内容的简单 HTML 文件。

现在我们需要引入该模板文件。在你的 JavaScript 文件中，你可以通过以下方式引入：

const engine = require('engine-plntr-handlebars');
const fs = require('fs');

const template = fs.readFileSync('./index.hbs', 'utf-8');
const context = { title: 'Welcome!', content: 'Here is some content' };
const html = engine.render(template, context);

console.log(html);

我们首先通过 require 引入了 engine-plntr-handlebars 包。然后，我们使用 fs 模块读取了我们的模板文件。接下来，我们指定了一些上下文变量来替换模板中的变量。最后，我们调用 engine.render 方法渲染模板并将结果保存在 html 变量中。当我们通过 console.log 打印 html 变量时，我们可以在控制台中看到生成的 HTML。

这很简单，但它只展示了最基本的使用方式。

渲染循环

现在，我们使用engine-plntr-handlebars 来创建一个循环渲染示例。

首先，我们需要准备一个扁平化数组：

-- -------------------- ---- -------
----- ------- - -
  ------ -
    - --- -- ----- ----- ----- ------ -- --
    - --- -- ----- ----- ----- ------ -- --
    - --- -- ----- ----- ------- ------ -- --
    - --- -- ----- ----- ------ ------ - --
    - --- -- ----- ----- ------ ------ - -
  -
-

接下来，我们可以使用以下 Handlebars 模板代码来渲染这个数组：

<ul>
  {{#each items}}
  <li>
    {{name}} - ${{price}}
  </li>
  {{/each}}
</ul>

在执行 engine.render() 方法时，上述模板会被解析，从而生成一个 ul 标记和包含所有条目信息的 li 标记。运行渲染示例，你可以看到以下内容：

<ul>
  <li>Item One - $10</li>
  <li>Item Two - $13</li>
  <li>Item Three - $16</li>
  <li>Item Four - $9</li>
  <li>Item Five - $5</li>
</ul>

条件渲染

engine-plntr-handlebars 还允许通过条件来控制模板中的输出内容。我们可以使用以下模板代码来打印一句话：

{{#if hasContent}}
  {{content}}
{{else}}
  <p>No content available.</p>
{{/if}}

在执行 engine.render() 方法时，上述模板会被解析，从而生成一条信息或一句话。

通过将 hasContent 设置为 true，我们可以渲染内容；而将其设置为 false，则会生成消息 "No content available."。这是很简单的示例，但它可以帮助你始终保持你的模板清晰和整洁。

结论

engine-plntr-handlebars 是一个极好的 npm 包，用于在前端编程中使用原生的 Handlebars 模板引擎。可以使用 npm 安装很容易获取它。我们演示了如何使用这个包来渲染一些简单的示例，包括循环和条件渲染。这些示例是处理前端编程中最常见任务的良好开端。现在您可以继续在您自己的项目中尝试不同类型的模板。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066e26a563576b7b1ecf8f