模板引擎 Handlebars.js

模板引擎 Handlebars.js

 

概述

Handlebars.js 是一个简单而强大的 JavaScript 模板引擎。它允许开发者通过定义模板和数据来生成动态的 HTML 页面。

Handlebars.js 基于 Mustache 模板语法，它提供了一些扩展和增强功能。并且开发者可以创建可重用的模板，并通过将数据传递给模板来生成最终的输出。这种分离数据和视图的方式使得应用程序的逻辑与界面呈现相互独立，提高了代码的可维护性和可扩展性。

官方网站 Github

特性

1. 简洁易用：Handlebars.js 的模板语法简单易懂，类似于 Mustache 的语法。它使用双花括号（{{}}）来标识变量、表达式和控制结构。

2. 数据绑定：Handlebars.js 支持数据绑定，可以将数据动态地插入到模板中。通过将数据对象传递给模板，可以使用 {{}} 语法在模板中引用数据的属性。

3. 条件和循环：Handlebars.js 提供了条件语句（如 if 和 unless）以及循环语句（如 each），使得可以根据条件和数据集合来动态地生成内容。

4. 局部模板和部分视图：Handlebars.js 允许定义局部模板和部分视图，可以在一个模板中引用其他模板，从而实现模块化和代码复用。

5. 注释：Handlebars.js 支持注释，可以在模板中添加注释来提供代码的解释和说明。

6. Helpers 扩展：Handlebars.js 允许定义自定义的 Helper 函数，用于处理和格式化数据，实现更复杂的模板逻辑。

7. 客户端和服务器端支持：Handlebars.js 可以在客户端和服务器端运行。在客户端，它可以直接嵌入到 HTML 页面中，并通过 JavaScript 脚本来渲染模板。在服务器端，可以使用 Handlebars.js 与服务器端框架（如 Node.js）进行集成，以生成动态的 HTML 页面。

开始

安装

npm install handlebars
# or
yarn add handlebars

使用

const Handlebars = require("handlebars");
const template = Handlebars.compile("Name: {{name}}");
console.log(template({ name: "Nils" }));

简单示例

<!-- template.hbs -->
<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

//index.js
var source = fs.readFileSync("./template.hbs");
var template = Handlebars.compile(source);
var context = { title: "My New Post", body: "This is my first post!" };
var html = template(context);
console.log(html)

结果

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>

其他方法

if-else

{{#if condition}}
  <!-- 条件为真时的内容 -->
{{else}}
  <!-- 条件为假时的内容 -->
{{/if}}

for

{{#each items}}
  <!-- 遍历 items 数组的每个元素 -->
  {{this}} <!-- 当前元素的值 -->
{{/each}}