使用布局，带有把手模板的部分答案

【问题标题】：Using Layout, Partials with Handlebars Template使用布局，带有把手模板的部分
【发布时间】：2017-02-01 03:04:45
【问题描述】：

如何使用布局、带有把手模板的部分，如下所示？

我查看了 partial 文档，但仍然无法弄清楚我想要实现的目标。

default.html

默认布局可重复用于网站的不同视图。 {{{content}}} 用作将呈现主要内容的占位符。

<!DOCTYPE html>
<html>
<head>  
  <title>{{title}}</title>
</head>
<body>
 <p>This is the top of the body content in the default.html file</p>
 {{{content}}}
 <p>This is the bottom of the body content in the default.html file</p>
</body>
</html>

index.html

{{#> default}}

{{ include header }}
<p>This is some other content</p>
{{ include footer }}

header.html

<h1>This is a header</h1>

footer.html

<p>This is a footer</p>

输出

<!DOCTYPE html>
<html>
<head>  
  <title>Using Layout, Partials with Handlebars Template</title>
</head>
<body>
 <p>This is the top of the body content in the default.html file</p>
 <h1>This is a header</h1>
 <p>This is some other content</p>
 <p>This is a footer</p>
 <p>This is the bottom of the body content in the default.html file</p>
</body>
</html>

【问题讨论】：

查看文档handlebarsjs.com/partials.html
@AndreyEtumyan。我已经更新了我的问题。

标签： javascript html handlebars.js template-engine template-inheritance

【解决方案1】：

首先要使部分工作首先删除 index.html 中部分调用前面的尖号（#）。

{{> 默认}}
第二：您将无法使用把手构建整个页面（带有标题）：一旦页面加载，就会加载 javascript，因此标题已经发送并且无法修改。 Handlebars.js 仅在您想要操作 DOM 以将模板结果放入容器时才有用。

您有一个可以在此处完成的示例： https://jsfiddle.net/ChristopheThiry/zepk5ebh/4/

<script id="default" type="text/x-handlebars-template">
 <p>This is the top of the body content in the default.html file</p>
 {{{content}}}
 <p>This is the bottom of the body content in the default.html file</p>
</script>

<script id="index" type="text/x-handlebars-template">
{{include header }}
{{> default}}
{{include footer }}
</script>

<div id="resultPlaceholder">
</div>

$(document).ready(function () {
  var defaultSource   = $("#default").html();
  var indexSource = $("#index").html();
  Handlebars.registerPartial('default',defaultSource);
  Handlebars.registerHelper('include', function(source) {
        return new Handlebars.SafeString(source);
});
  var template = Handlebars.compile(indexSource);
  var context = { "content" : "<b>This is some other content</b>","header" : "<h1>This is a header</h1>", "footer" : "<div class='footer'>This is a footer</div>"} ;
  var html    = template(context);
  $("#resultPlaceholder").html(html);
});

我希望这个例子会有所帮助......

【讨论】：

添加部分{{> default}}，只包含default.html 文件的内容。我按照你说的做得到的结果显示在这个gist 中，这不是我想要的。请参阅我更新的问题。
如果它调用 default.html 那么你调用部分......这里有什么问题？你期望什么结果？据我所知，您从您的电话中得到了我期望的确切结果。
body 内容的底部首先出现，因为首先调用了 default.html，然后出现了部分内容。即页眉和页脚位于不正确的正文内容的底部之后。

【解决方案2】：

我知道这个问题已经过时了，但是我目前遇到了同样的“问题”。

如果您对实施有疑问，请查看documentation。

一个实现示例：

JS 代码

import * as Handlebars from 'handlebars';
import * as path from 'path';

...

const partial_path = path.join(HBS, partial);
const { name } = path.parse(path.basename(partial_path));
Handlebars.registerPartial(name, readHbs(partial_path)); // readHBS only reads the file syncronously.

车把部分（基础文件）

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>title</title>
    <style>
    </style>
  </head>
  <body>
    <main class="flexbox">
      <div class="flexbox container paper">{{> @partial-block }}</div>
    </main>
  </body>
</html>

车把模板

{{#> base extra_headers="" }}
<header style="width: inherit;">
  <h1 style="text-align: center;"> I'm your template ?</h1>
</header>
{{/base }}

【讨论】：