拓展阅读

java 表达式引擎

logstash 日志加工处理-08-表达式执行引擎 AviatorScript+MVEL+OGNL+SpEL+JEXL+JUEL+Janino

QLExpress 阿里表达式引擎系统学习

Spring Boot-07-thymeleaf 模板引擎整合使用

Template Engine-01-模板引擎简介

Template Engine-02-模板引擎 Freemarker

Template Engine-03-模板引擎 Freemarker Advance

Template Engine-04-模板引擎 Velocity

Template Engine-05-模板引擎 Thymeleaf 入门介绍

Template Engine-06-模板引擎 Handlebars 入门介绍

Template Engine-07-模板引擎 Mustache 入门介绍 Logic-less templates.

什么是 Handlebars？

Handlebars 是一种简单的模板语言。

它使用模板和输入对象生成 HTML 或其他文本格式。Handlebars 模板看起来像带有嵌入的 Handlebars 表达式的常规文本。

模板


<p>{{firstname}} {{lastname}}</p>

Handlebars 表达式是 {{，一些内容，后跟一个 }}。

当执行模板时，这些表达式将被输入对象中的值替换。

了解更多：表达式

安装

测试 Handlebars 的最快方法是从 CDN 加载它并嵌入到 HTML 文件中。


<!-- 从 CDN 包含 Handlebars -->
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script>
  // 编译模板
  var template = Handlebars.compile("Handlebars <b>{{doesWhat}}</b>");
  // 执行已编译的模板并将输出打印到控制台
  console.log(template({ doesWhat: "rocks!" }));
</script>

警告

这种方法适用于小型页面和测试。当面向真实的生产系统时，有几种其他使用 Handlebars 的方法。

了解更多：安装

语言特性

简单表达式

如前所示，以下模板定义了两个 Handlebars 表达式

模板

<p>{{firstname}} {{lastname}}</p>

如果应用于输入对象

输入

{
  firstname: "Yehuda",
  lastname: "Katz",
}

则表达式将被相应属性替换。结果如下

输出

<p>Yehuda Katz</p>

嵌套输入对象

有时，输入对象包含其他对象或数组。例如：

输入

{
  person: {
    firstname: "Yehuda",
    lastname: "Katz",
  },
}

在这种情况下，您可以使用点符号来访问嵌套属性

模板

{{person.firstname}} {{person.lastname}}

了解更多：表达式

一些内置助手允许您将当前上下文更改为嵌套对象。然后，您可以像访问根对象一样访问此对象

评估上下文

内置的块助手 each 和 with 允许您更改当前评估上下文。

with 助手深入到对象属性中，使您可以访问其属性

模板


{{#with person}}
{{firstname}} {{lastname}}
{{/with}}

输入

{
  person: {
    firstname: "Yehuda",
    lastname: "Katz",
  },
}

each 助手遍历数组，允许您通过简单的 Handlebars 表达式访问每个对象的属性。

模板


<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

输入

{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley",
  ],
}

了解更多：内置助手

模板注释

您可以在 Handlebars 代码中使用注释，就像在代码中一样。由于通常存在一定程度的逻辑，这是一种良好的实践。

注释不会出现在生成的输出中。如果希望注释显示出来，只需使用 HTML 注释，它们

chat

详细介绍一下 模板引擎 Handlebars

Handlebars模板引擎详细介绍

1. 概述

Handlebars是一款简单而强大的模板引擎，用于将数据和模板合并生成HTML。它是一个逻辑-less、零配置的工具，专注于数据绑定和模板渲染。Handlebars的设计目标是使模板更加清晰、简洁，让开发人员专注于数据和结构。

2. 基本语法

Handlebars使用两对花括号（``）表示要插入的变量。以下是一些基本语法的示例：

2.1 插值

<p>Hello, !</p>

在这个例子中，``将会被实际数据替换，生成类似于<p>Hello, John!</p>的HTML。

2.2 表达式

Handlebars支持简单的表达式，可以在模板中执行一些基本的逻辑。例如：


  <p>Welcome, Administrator!</p>

  <p>Welcome, User!</p>

这里使用了和语法来根据条件显示不同的欢迎消息。

2.3 循环

Handlebars允许对数组进行循环操作，以便在模板中重复渲染相同的结构：

<ul>
  
    <li></li>
  
</ul>

在这个例子中，``会对users数组进行循环，对每个用户生成一个列表项。

2.4 部分（Partial）

Handlebars支持将模板分割为可重用的部分，称为部分。这使得可以在多个地方使用相同的结构。例如：

<!-- user.hbs -->
<p></p>

<!-- profile.hbs -->
<div class="user-profile">
  
</div>

在profile.hbs中，通过``引入了user.hbs的内容。

3. 注册Helper

Handlebars允许注册自定义的Helper函数，以执行更高级的逻辑。Helper是模板中的函数，可以接受参数。例如：


  <p>Values are equal!</p>

  <p>Values are not equal!</p>

上述例子中的ifCond就是一个自定义Helper，执行了两个值的相等性检查。

4. 使用Handlebars

在使用Handlebars时，需要引入Handlebars库，并加载模板文件。

在浏览器端，可以通过CDN引入Handlebars库，或者使用Node.js和NPM进行安装。

4.1 浏览器端示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Handlebars Example</title>
</head>
<body>

  <script src="https://cdn.jsdelivr.net/npm/handlebars/dist/handlebars.min.js"></script>

  <script id="my-template" type="text/x-handlebars-template">
    <p>Hello, !</p>
  </script>

  <script>
    // Compile the template
    var source = document.getElementById('my-template').innerHTML;
    var template = Handlebars.compile(source);

    // Data
    var context = { name: 'John' };

    // Render the template with data
    var html = template(context);

    // Insert the rendered HTML into the document
    document.body.innerHTML += html;
  </script>

</body>
</html>

4.2 Node.js示例

首先，通过NPM安装Handlebars：

npm install handlebars

然后，使用Handlebars在Node.js中渲染模板：

const Handlebars = require('handlebars');

// Template source
const source = '<p>Hello, !</p>';

// Compile the template
const template = Handlebars.compile(source);

// Data
const context = { name: 'John' };

// Render the template with data
const html = template(context);

// Output the rendered HTML
console.log(html);

5. 总结

Handlebars是一个简单而强大的模板引擎，通过清晰的语法和基本的逻辑处理，使得数据绑定和模板渲染变得简单而直观。

它适用于浏览器端和Node.js环境，广泛应用于前端开发和服务器端渲染。

Handlebars的简单性和可扩展性使其成为流行的模板引擎之一。

给出 Handlebars 深入学习的资料，包含网址

以下是深入学习Handlebars的一些资料和网址：

  1. Handlebars 官方文档:
  2. Handlebars GitHub 仓库:
    • Handlebars GitHub Repository Handlebars的源代码托管在GitHub上，你可以查看最新的源码、提交记录以及问题跟踪。
  3. Handlebars 辅助学习资源:
  4. Handlebars 教程和示例:
    • Handlebars Tutorial Handlebars官方网站上的教程部分，提供了基础和进阶的 Handlebars 使用示例。
  5. Handlebars 深入理解:
  6. Handlebars.js 教程 - W3Schools:

请注意，由于互联网上的内容可能随时更改，建议访问官方文档和学习资源以获取最新信息。

参考资料

https://handlebarsjs.com/guide/#what-is-handlebars