Using Layout, Partials with Handlebars Template

javascript html handlebars.js template-engine template-inheritance

16,734

First to make the partial work first remove the sharp(#) in front of your partial call in index.html.

{{> default}}
Second : you won't be able to build a whole page (with headers) using handlebars : the javascript is loaded once the page has been loaded so headers are already sent and can't be modified. Handlebars.js is only useful if you want to manipulate the DOM to put your template result in a container.

You have an example of what can be done here: 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);
});

I hope the example will help ...

16,734

Author by

Ishan

Data Analyst with a development background currently looking for a job.

Updated on June 04, 2022

Comments

Ishan almost 2 years

How do I use layouts, partials with handlebars template like the following?

I have looked at the partial docs but still could not figure out what I wanted to achieve.

default.html

The default layout is reused for the different views of the site. {{{content}}} is used as a placeholder for where the main content will be rendered.

<!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>

Output

<!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>

Ishan over 7 years

Adding the partial {{> default}}, just includes the contents of the default.html file in its place. The result I get by doing what you said is shown in this gist, which is not what I want. See my updated question.
Christophe over 7 years

If it calls default.html then you call the partial... what is wrong here ? What result do you expect ? As far as I see you get the exact result that I expect from your call.
Ishan over 7 years

The bottom of the body content appears first since the default.html is called first then the content of the partials appears. ie the header & the footer comes after the bottom of the body content which is incorrect.