Mon*_*key 3 handlebars.js hapijs
我在使用hapi.js应用程序渲染车把布局时遇到了麻烦.布局渲染得很好,但部分根本不渲染,只有一个空白.
我这样声明:
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'
});
和锅炉板布局
<html>
<body>
{{#content "body"}}
<h2>Welcome Home</h2>
{{/content}}
{{#content "foot"}}
{{/content}}
</body>
</html>
和html部分
{{#extend "layout"}}
{{#content "body"}}
<h2>Sub page content</h2>
{{/content}}
{{#content "foot" mode="prepend"}}
<script src="assets/js/analytics.js"></script>
{{/content}}
{{/extend}}
Ger*_*osi 11
Hapi支持开箱即用的布局.问题是你试图将hapi的布局支持与把手布局模块一起使用.它不会起作用.使用内置布局支持,或使用手柄布局.此外,在布局中您需要使用{{#block "body"}}{{/block}}而不是{{#content "body"}}.这是两个例子:
使用把手布局模块:
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();
意见/谐音/ page.html中:
{{#extend "layout"}}
{{#content "body"}}
<h2>{{title}}</h2>
{{/content}}
{{#content "foot" mode="prepend"}}
<script src="assets/js/analytics.js"></script>
{{/content}}
{{/extend}}
意见/分音/的layout.html:
<html>
<body>
{{#block "body"}}
<h2>Welcome Home</h2>
{{/block}}
{{#block "foot"}}
{{/block}}
</body>
</html>
意见/ item.html:
{{#embed "page"}}{{/embed}}
{{body}}
借助hapi的内置布局支持:
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();
景色/布局/的layout.html:
<html>
<body>
{{> header}}
{{{content}}}
{{> footer}}
</body>
</html>
视图/分音/ footer.html:
<script src="assets/js/analytics.js"></script>
意见/谐音/ header.html中:
<h2>{{@root.title}}{{^title}}Welcome Home{{/title}}</h2>
意见/ item.html:
{{body}}