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

如何使用布局，部分与如下所示的句柄模板？使用布局，部分与手柄模板

我看过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>

来源

2016-09-23 Ishan

检查文档partials.html –

@AndreyEtumyan。我更新了我的问题。 – Ishan

首先使部分工作首先除去锐（＃）在你的index.html部分呼叫的前面。

{{>默认}}
第二：你将无法使用车把打造一整页（有头）的JavaScript加载一旦页面已经被加载，从而头已经发送并且不能修改。 Handlebars.js只有在你想操纵DOM将你的模板结果放入一个容器时才有用。

你有什么可以在这里完成一个例子：http://handlebarsjs.com/ 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); 
});

我希望例子可以帮助...

来源

2016-09-26 09:10:26

添加部分'{{>默认}}'，在其位置包含'default.html'文件的内容。我通过做你说的得到的结果显示在这[主要]（https://gist.github.com/ishu3101/958a289f1b3a55b4f5ed0d3540b914ac），这不是我想要的。看到我更新的问题。 – Ishan

如果它调用default.html，那么你调用partial ...这里有什么问题？你期望什么结果？据我所见，你可以得到我期望从你的电话中得到的确切结果。 –

由于首先调用default.html，所以出现正文内容的底部，因此会出现部分内容。即页眉和页脚出现在正文内容的底部，这是不正确的。 – Ishan

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

回答

相关问题