使用佈局，部分與手柄模板

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

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

使用佈局，部分與手柄模板

回答

相關問題