如何在Handlebars局部模板中插入HTML块

Question

我在一个简单的Node.js项目中使用Handlebars，我想在部分代码中插入不止一些变量。

我有一个包含基本HTML页面框架（html和head标签）的layout。我渲染的页面通常都相同，包含以下代码：

{{> default/header
  help_title="This is the title of my help modal."
  help_body="<p>This is the body.</p>"
}}

<main class="vertical-center">
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-8 justify-content-center align-items-center">
        <!-- THE CONTENT THERE -->
      </div>
    </div>
  </div>
</main>

{{> default/footer}}

根据页面本身的情况，我可能不想显示页眉和/或页脚（因此相应地删除该行）。 我的需求：我希望将main部分包装在一个局部文件中（因为除了 <!-- THE CONTENT THERE -->之外的所有内容都是不变的），或者任何可以完成工作并提供给它不仅是几个单词（如页眉）而且有很多HTML代码的内容。我无法在文档中找到这样做的方法。类似于下面的内容，基本上会像布局一样起作用：

{{> default/main
  <!-- THE RAW HTML CONTENT THERE -->
}}

- Gab

---

在Angular中，它被称为插槽传递。这就是我在处理Handlebars时一直在寻找的，但是没有找到。感谢问题。很高兴最终找到了它。 - BBaysinger

Answer 1

Handlebars通过局部块的形式，精确地支持您所描述的内容。局部块的默认行为是在未找到局部块时呈现默认内容。但是，有一个特殊的内置助手@partial-block，它将向您的局部块注入内容。

根据文档:

此块语法还可用于将模板传递给局部块，这可以由特别命名的局部块@partial-block执行。

在您的局部块中，您将添加{{> @partial-block }}，以指定注入内容的位置。在您的情况下，“主”局部块将如下所示:

<main class="vertical-center">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-8 justify-content-center align-items-center">
                {{> @partial-block }}
            </div>
        </div>
    </div>
</main>

接下来，调用“main”局部视图的页面将使用块语法，并将要注入到局部视图中的内容放置在块标签内：

```html {% block content %} {% endblock %} ```

{{#> main}}
    <p>THE RAW HTML CONTENT HERE</p>
{{/main}}

我已经为您创建了一个 JSFiddle，供您参考。

- 76484

---

非常感谢您的答案@76484！ - Gab