Question

我无法在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 partial

{{#extend "layout"}}

    {{#content "body"}}
        <h2>Sub page content</h2>
    {{/content}}

    {{#content "foot" mode="prepend"}}
        <script src="assets/js/analytics.js"></script>
    {{/content}}
{{/extend}}

Answer 1

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}}

如何获得在node / hapi.js中工作的把手布局

1 个答案: