使用布局，帶有把手模板的部分

Question

我如何使用布局、partials 和如下所示的把手模板？

我查看了部分文檔，但仍然無法弄清楚我想要實現的目標。

默認.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>

索引.html

{{#> default}}

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

標題.html

<h1>This is a header</h1>

頁腳.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 中部分調用前面的sharp(#)。
{{> 默認}}
第二：您將無法使用把手構建整個頁面（帶有標題）：一旦頁面加載，就會加載 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

我知道這個問題已經過時了，但是我目前遇到了同樣的“問題”。

如果您對實現有一些疑問，請查看文檔。

一個實現示例：

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 個解決方案

解決方案1
2 2016-09-26 09:10:26

解決方案2
0 2021-07-17 16:54:21

使用布局，帶有把手模板的部分

問題描述

2 個解決方案

解決方案1 2 2016-09-26 09:10:26

解決方案2 0 2021-07-17 16:54:21

解決方案1
2 2016-09-26 09:10:26

解決方案2
0 2021-07-17 16:54:21