如何获取在node / hapi.js中工作的handlebar-layouts [英] how to get handlebar-layouts working in node/hapi.js
问题描述
我无法在hapi.js应用程序中获取handlebars布局。布局渲染正常,但部分渲染完全不显示,只是空白。
我声明如下:
var handlebars = require('handlebars'),
layouts = require('handlebars-layouts');
布局(把手);
server.views({
engines:{
html:handlebars
},
basePath:__dirname,
path:'./ views',
layoutPath:'./views/layout',
partialsPath:'./views/partials',
layout:true,
helpersPath:'./views/助手'
});
和锅炉板布局
< HTML>
< body>
{{#contentbody}}
< h2>欢迎首页< / h2>
{{/ content}}
{{#contentfoot}}
{{/ content}}
< / body>
< / html>
和html部分
{{#extendlayout}}
{{#contentbody}}
< h2>子页面内容< / h2>
{{/ content}}
{{#contentfootmode =prepend}}
< script src =assets / js / analytics.js >< /脚本>
{{content}}
{{/ extend}}
Hapi支持开箱即用的布局。问题在于你试图将hapi的布局支持与handlebars-layouts模块一起使用。这不会起作用。要么使用内置的布局支持,要么使用handlebars-layouts。此外,在布局中,您需要使用 {{#blockbody}} {{block}}
来代替 {{#content体}}
。以下是两个示例:
使用handlebars-layouts模块:
索引.js:
var Handlebars = require('handlebars');
var HandlebarsLayouts = require('handlebars-layouts');
var Hapi = require('hapi');
var Path = require('path');
var engine = Handlebars.create();
HandlebarsLayouts.register(引擎);
var server = new Hapi.Server();
server.connection({
host:'127.0.0.1',
port:8000
});
$ b server.views({
engines:{
html:engine
},
path:Path.join(__ dirname,'views'),
partialsPath:Path.join(__ dirname,'views / partials)'
});
$ b server.route({
method:'GET',
path:'/ item',
handler:function(request,reply){
reply.view('item',{title:'Item Title',body:'Item Body'});
}
});
server.start();
views / partials / page.html:
{{#extendlayout}}
{{#contentbody}}
< h2> {{title}} < / H2>
{{/ content}}
{{#contentfootmode =prepend}}
< script src =assets / js / analytics.js >< /脚本>
{{/ content}}
{{/ extend}}
views / partials / layout.html:
< html>
< body>
{{#blockbody}}
< h2>欢迎首页< / h2>
{{/ block}}
{{#blockfoot}}
{{/ block}}
< / body>
< / html> b
$ b $ views $ $ p $ {{#embedpage}} {{/ embed}}
{{body}}
pre>
使用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')
});
$ b server.route({
method:'GET',
path:'/ item',
handler:function(request,reply){
reply.view('item',{title:'Item Title',body:'Item Body'});
}
});
server.start();
views / layout / layout.html:
< HTML>
< body>
{{> header}}
{{{content}}}
{{> footer}}
< / body>
< / html>
view / partials / footer.html:
< script src =assets / js / analytics.js>< / script>
views / partials / header.html:
< h2> {{@ root.title}} {{^ title}}欢迎回家{{/ title}}< / h2> b
$ b $ views $ $ p> {{body}}
I'm having trouble getting handlebars-layouts to render in a hapi.js app. The layout renders fine but the partial doesn't render at all and just has a blank.
I'm declaring 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 boiler plate layout
<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}}
解决方案 Hapi supports layouts out of the box. The problem is that you are trying to use hapi's layout support together with the handlebars-layouts module. It's not going to work. Either use the built-in layout support, or use handlebars-layouts. Also, in the 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/partials/page.html:
{{#extend "layout"}}
{{#content "body"}}
<h2>{{title}}</h2>
{{/content}}
{{#content "foot" mode="prepend"}}
<script src="assets/js/analytics.js"></script>
{{/content}}
{{/extend}}
views/partials/layout.html:
<html>
<body>
{{#block "body"}}
<h2>Welcome Home</h2>
{{/block}}
{{#block "foot"}}
{{/block}}
</body>
</html>
views/item.html:
{{#embed "page"}}{{/embed}}
{{body}}
With hapi's built-in 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();
views/layout/layout.html:
<html>
<body>
{{> header}}
{{{content}}}
{{> footer}}
</body>
</html>
view/partials/footer.html:
<script src="assets/js/analytics.js"></script>
views/partials/header.html:
<h2>{{@root.title}}{{^title}}Welcome Home{{/title}}</h2>
views/item.html:
{{body}}
这篇关于如何获取在node / hapi.js中工作的handlebar-layouts的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!