Question

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

我查看了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>

Answer 1

首先让部分工作首先删除index.html中部分调用前的尖锐（＃）。

{{＆GT;默认}}
第二：您将无法使用把手构建整个页面（带标题）：一旦页面加载，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);
});

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

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

使用布局，部分与把手模板

2 个答案: