View engines, or template engines, allow you to maintain a clean separation between your presentation layer and the rest of your application. This post will demonstrate how to use the vision plugin with hapi to enable template support.
index.js
server.register(require('vision'), function(){
server.views({
engines: {
hbs: require('handlebars')
},
relativeTo: __dirname,
path: 'views'
});
server.route( {
method: 'GET',
path: '/user/{username?}',
handler: function ( request, reply ) {
var username = request.params.username ? request.params.username : "World";
reply.view('home', {username: username})
}
} );
});
home.hbs:
<h1>Hello, {{username}}!</h1>
view can also support layout, to do this, we only need to add :
server.views({
engines: {
hbs: require('handlebars')
},
relativeTo: __dirname,
path: 'views',
layout: true
});
layout.hbs:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>I'm hapi!</title> <style> * { font-family: 'DejaVu Sans'; font-weight: 100; color: #333; } h1 { margin: 40px; padding: 50px; text-align: center; background-color: #FA4; box-shadow: 10px 10px 25px 0px #888; } </style> </head> <body> {{{content}}} </body> </html>
It will automaticlly wrap the content into the layout.hbs.
