How to get rudder layouts working in node / hapi.js
I am having problems displaying pen layouts in hapi.js. The render layout is fine, but the partial doesn't render at all and just has a space.
I declare it like this:
var handlebars = require('handlebars'),
layouts = require('handlebars-layouts');
layouts(handlebars);
server.views({
engines: {
html: handlebars
},
basePath: __dirname,
path: './views',
layoutPath: './views/layout',
partialsPath: './views/partials',
layout: true,
helpersPath: './views/helpers'
});
and the position of the boiler plate
<html>
<body>
{{#content "body"}}
<h2>Welcome Home</h2>
{{/content}}
{{#content "foot"}}
{{/content}}
</body>
</html>
and html partial
{{#extend "layout"}}
{{#content "body"}}
<h2>Sub page content</h2>
{{/content}}
{{#content "foot" mode="prepend"}}
<script src="assets/js/analytics.js"></script>
{{/content}}
{{/extend}}
source to share
Hapi supports layouts out of the box. The problem is you are trying to use the hapi layout support along with the handlebars-layouts module. It won't work. Either use built-in layout support or use rudder layouts. Also, in layout, you need to use {{#block "body"}}{{/block}}
instead of {{#content "body"}}
. Here are two examples:
With the handlebars-layouts module:
index.js:
var Handlebars = require('handlebars');
var HandlebarsLayouts = require('handlebars-layouts');
var Hapi = require('hapi');
var Path = require('path');
var engine = Handlebars.create();
HandlebarsLayouts.register(engine);
var server = new Hapi.Server();
server.connection({
host: '127.0.0.1',
port: 8000
});
server.views({
engines: {
html: engine
},
path: Path.join(__dirname, 'views'),
partialsPath: Path.join(__dirname, 'views/partials)'
});
server.route({
method: 'GET',
path: '/item',
handler: function (request, reply) {
reply.view('item', { title: 'Item Title', body: 'Item Body' });
}
});
server.start();
Views / overtones / page.html:
{{#extend "layout"}}
{{#content "body"}}
<h2>{{title}}</h2>
{{/content}}
{{#content "foot" mode="prepend"}}
<script src="assets/js/analytics.js"></script>
{{/content}}
{{/extend}}
Views / overtones / layout.html:
<html>
<body>
{{#block "body"}}
<h2>Welcome Home</h2>
{{/block}}
{{#block "foot"}}
{{/block}}
</body>
</html>
view / item.html:
{{#embed "page"}}{{/embed}}
{{body}}
With inline hapi layout support:
index.js:
var Handlebars = require('handlebars');
var Hapi = require('hapi');
var Path = require('path');
var server = new Hapi.Server();
server.connection({
host: '127.0.0.1',
port: 8000
});
server.views({
engines: {
html: Handlebars.create()
},
path: Path.join(__dirname, 'views'),
layoutPath: Path.join(__dirname, 'views/layout'),
layout: true,
partialsPath: Path.join(__dirname, 'views/partials')
});
server.route({
method: 'GET',
path: '/item',
handler: function (request, reply) {
reply.view('item', { title: 'Item Title', body: 'Item Body' });
}
});
server.start();
view / layout / layout.html:
<html>
<body>
{{> header}}
{{{content}}}
{{> footer}}
</body>
</html>
View / overtones / footer.html:
<script src="assets/js/analytics.js"></script>
Views / overtones / header.html:
<h2>{{@root.title}}{{^title}}Welcome Home{{/title}}</h2>
view / item.html:
{{body}}
source to share