I am using handlebars with webpack and handlebars-loader (A handlebars template loader for webpack.) to implement a multi page web app. Below is the structure of my views folder (.hbs files)
- views
components
- sidebar.hbs
layouts
- default.hbs
- product.hbs
index.hbs
product-1.hbs
product-2.hbs
...
My problem is that I see a weird behavior from 'partial-block' in handlebars. I have two layouts that wrap the main content of each page. but my layout doesn't load the 'partial-block' in the right line. wherever I use partial-block in the layout, handlebars will close the body and html tag at that place and will render the partial-block content after html closing tag.
below is my sample default layout that loads partial-block inside body :
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{meta.title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="theme-light">
{{#if @partial-block}}
{{> @partial-block }}
{{/if}}
</body>
</html>
My index.hbs file that uses default layout
{{> layouts/default }}
<main id="index" class="index">
<p>This is index content</p>
</main>
{{layouts/default}}
And rendered html file
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Test Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="theme-light">
</body>
</html>
<main id="index" class="index">
<p>This is index content</p>
</main>
Like I said, the main tag goes after closing html tag which is not expected behavior.
there is a wrong syntax.
you should type like this.