如何让车把布局在 node/hapi.js 中工作答案

【问题标题】：how to get handlebar-layouts working in node/hapi.js如何让车把布局在 node/hapi.js 中工作
【发布时间】：2015-01-01 16:04:09
【问题描述】：

我无法让把手布局在 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}}

【问题讨论】：

标签： handlebars.js hapijs

【解决方案1】：

Hapi 支持开箱即用的布局。问题是您正在尝试将 hapi 的布局支持与 handlebars-layouts 模块一起使用。这是行不通的。要么使用内置的布局支持，要么使用把手布局。此外，在布局中您需要使用{{#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();

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>

视图/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();

views/layout/layout.html:

<html>
  <body>
    {{> header}}

    {{{content}}}

    {{> footer}}
 </body>
</html>

查看/partials/footer.html：

<script src="assets/js/analytics.js"></script>

views/partials/header.html：

<h2>{{@root.title}}{{^title}}Welcome Home{{/title}}</h2>

视图/item.html：

{{body}}

【讨论】：

按照“使用 hapi 的内置布局支持：”的示例，item.html 被呈现为 HTML 转义字符串，我看到所有 HTML 都以文本形式出现在浏览器中。如何将 item.html 中的内容添加为 HTML？另外，我可以为 item.html 文件添加多个内容区域来填充。例如：{{css}}、{{body}}、{{js}}？
@Zambonilli 有人编辑了我的答案。我将更改回滚到我原来的答案。使用{{{content}}} 而不是{{content}}。不确定多个内容领域。试一试，如果不起作用，请作为新问题提出。
成功了，谢谢！有机会我会尝试测试多个内容区域。