как заставить макеты руля работать в node/hapi.js

У меня возникли проблемы с отображением макетов руля в приложении 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}}

person MonkeyBonkey    schedule 05.11.2014    source источник


Ответы (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();

просмотры/частичные/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();

просмотры/макет/макет.html:

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

    {{{content}}}

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

вид/partials/footer.html:

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

просмотры/частичные/header.html:

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

просмотры/item.html:

{{body}}
person Gergo Erdosi    schedule 05.11.2014
comment
Следуя примеру со встроенной поддержкой макета hapi: item.html отображается как экранированная строка HTML, и я вижу, что весь HTML-код отображается в виде текста в браузере. Как добавить содержимое в item.html в формате HTML? Кроме того, могу ли я добавить несколько областей содержимого для заполнения файла item.html. Например: {{css}}, {{body}}, {{js}}? - person Zambonilli; 03.01.2015
comment
@Zambonilli Кто-то отредактировал мой ответ. Я откатил изменения обратно к своему исходному ответу. Используйте {{{content}}} вместо {{content}}. Не уверен насчет нескольких областей контента. Попробуйте, и если это не сработает, задайте его как новый вопрос. - person Gergo Erdosi; 03.01.2015
comment
Это сработало, спасибо! Я постараюсь протестировать несколько областей контента, когда у меня будет возможность. - person Zambonilli; 12.01.2015