handlebars.js - 如何在 Handlebars 部分中插入 html block

Question

我将 Handlebars 用于一个简单的 Node.js 项目，并且我想在部分中插入多个变量。

我有一个 layout包含我的 html 页面的非常基本的框架( html 和 head 标签)。我渲染的页面通常都是一样的，并且包含以下代码:

{{> 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 -->
}}

Answer 1

Handlebars 完全支持您以 partial blocks 的形式描述的内容。 .部分块的默认行为是在找不到部分时呈现默认内容。但是，有一个特殊的内置助手，@partial-block这会将内容注入(inject)您的部分。

从文档:

This block syntax may also be used to pass templates to the partial, which can be executed by the specially named partial, @partial-block.

在您的部分中，您将添加 {{> @partial-block }}您希望将内容注入(inject)的位置。在您的情况下，您的“主要”部分将如下所示:

<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>

然后，调用“主要”部分的页面将使用块语法将内容注入(inject)到块标记内的部分中:

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

我创建了一个 fiddle供你引用。