程序员经验分享-hwhale

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

2024-04-02

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

Hapi 支持开箱即用的布局。问题是您正在尝试将 hapi 的布局支持与handlebars-layouts 模块一起使用。这是行不通的。使用内置布局支持，或使用把手布局。另外，在布局中您需要使用{{#block "body"}}{{/block}}代替{{#content "body"}}。下面是两个例子：

使用车把布局模块：

索引.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();

视图/partials/page.html：

{{#extend "layout"}}

    {{#content "body"}}
        <h2>{{title}}</h2>
    {{/content}}

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

{{/extend}}

视图/partials/layout.html：

<html>
  <body>
    {{#block "body"}}
        <h2>Welcome Home</h2>
    {{/block}}

    {{#block "foot"}}

    {{/block}}
 </body>
</html>

视图/item.html：

{{#embed "page"}}{{/embed}}

{{body}}

借助 hapi 的内置布局支持：

索引.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>

查看/partials/footer.html：

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

视图/partials/header.html：

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

视图/item.html：

{{body}}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

handlebarsjs

hapijs

如何让车把布局在 node/hapi.js 中工作 的相关文章

  • Joi 正则表达式不被识别为正则表达式模式

    我正在尝试为密码字段制定验证规则 它应包含以下内容 必须有号码 必须至少包含一个大写字母 必须包含至少一个小写字母 必须包含以下任何符号 长度应仅为 8 到 20 个字符 这是我使用的正则表达式模式 a z A Z d A Za z d 8

  • 如何将主干视图连接到流星车把模板？

    看起来像 Backbone view meteor 和 handbars 在操作 DOM 的一部分时具有重叠功能 我查看了 ToDo 应用程序 它应该使用 Backbone 但实际上 他们只使用路由器 主干视图也处理模板 但它们听起来与流星

  • 如何在车把模板中使用 {{{{raw-helper}}}}

    我有一个效果很好的车把模板 我希望能够将以下内容放入其中 这显然会在处理车把文件时呈现 所有的 最终都是空白的 这不好 我找到了 raw helper 块助手 并像这样尝试 raw helper

  • 有没有办法通过 Express + Node.js 使用多个视图引擎

    Scenario 我使用开发了一些交易页面Node js http nodejs org Express http expressjs com 车把 http handlebarsjs com 作为视图引擎和MongoDB http www

  • Ember.js 渲染大型列表而不锁定浏览器

    当需要在客户端渲染大量项目时 我对 Ember js 有哪些选择 分页是一种减少渲染时间的明显方法 但是还有其他技巧可以让您渲染一个大的项目列表 而不会在 JavaScript 执行时出现明显的浏览器冻结吗 ember 列表视图 https

  • 使用 ember 评估车把中的两个条件

    我想知道是否可以做这样的事情 if ClientController Client number PhoneController hasLinesToInstall if Thanks Juanitos 我认为不可能在车把中链接这样的条件

  • 从另一个路由调用 hapi 路由

    我对 HapiJS 还很陌生 我正在构建一个服务 其中有两条路线 route 1 和 route 2 都使用插件架构 我已将两者注册为我的清单文件中的插件 我想从 route2 调用 route1 因此 route2 取决于 route1

  • 车把示例不起作用

    在我的节点服务器提供的 hbs 中 在我的客户端 JavaScript 文件中 var source entry template html var template Handlebars compi

  • hapi.js - 404 路由 VS 静态文件路由

    我正在尝试将 Express 应用程序迁移到 hapi js 但我的路线遇到了问题 我只想要 2 GET 我的索引 以及所有不是 的内容重定向到 使用 Express 我有这个 static files app use express st

  • 标签中的 Ember 车把模板

    ember 特别是应用程序模板 是否可以在 head 标签内进行操作 以便动态更改标题标签 元标签 外部 css 样式表和 favicon 等内容 如果是这样 那么一种干净的方法是什么 为了完成这项工作 我所做的是创建车把助手 例如 如果您

  • 车把模板的文件扩展名

    我更改了车把模板的扩展名 并在调用 handlebarjs 编译函数的函数中引用了相同的扩展名 它工作得很好 没有任何问题 但我很好奇是否还有其他人尝试过 如果您认为这可能会因任何原因导致问题 请告诉我 出于某种原因 我觉得扩展名 hand

  • 使用 Handlebars.js 迭代基本的“for”循环

    我是 Handlebars js 的新手 刚刚开始使用它 大多数示例都基于对象的迭代 我想知道如何在基本 for 循环中使用车把 Example for i 0 i lt 100 i create li s with i as the va

  • 在 Ember 中将模型属性插入 Img 元素 URL

    我有一个模型image id财产 我有一个包含图像元素的模型视图 我需要将 id 插入图像元素的src属性来完成图像的 URL 以便我有效地执行此操作 img src 我的第一次尝试使用了 Handlebars 助手 img src 但这也

  • 使用变量名调用 Handlebars {{render}}

    有没有办法将变量上下文传递给 render helper 例如 我的模型具有多态关系 我想为每种不同类型呈现适当的视图 无需编写一整串if声明 my events模板看起来像这样 ul each event in model li even

  • express-hbs 实例 registerAsyncHelper 奇怪的哈希值

    我正在使用express hbs nodejs模块 但在使用时遇到问题registerAsyncHelper 我需要在限制范围内编译布局 因为我创建了一个新的 Handlebars 实例 并在该实例中创建了一个助手 但是当我编译布局时 它返

  • HandleBars 检查 Each 中的索引是否可以被四整除

    对把手不太熟悉 但我在报告设置中使用它 并处理要打印的输出 我正在打印的文档每页应该有四份 所以我想做一个像if index 4 0 但我有点不确定该怎么做 我正在浏览一系列对象 each dataset 这是基本布局 以及我对每页四页报告

  • 将 ERB 与 Handlebars 模板结合使用

    我有一个使用 ajax 创建新标签的模式 它使用 Tags 参数执行 POST 方法 而无需重新充电视图 因此 我希望根据所选的 price type 参数来呈现一个或另一个价格 div 我使用 Handlebars 所以我想这不是 rub

  • Ember CLI 中的把手助手语法

    在这篇文章中 使用 Handlebars js 迭代基本的 for 循环 https stackoverflow com questions 11924452 handlebar js iterating over for basic lo

  • 如何使用handbars和nodemailer来发送电子邮件？

    我正在使用 nodemailer 使用以下命令发送电子邮件Nodemailer express 车把 https github com mart jansink nodemailer express handlebars插入 我用这篇 de

  • 如何在车把模板的单选按钮组中设置所选项目？

    在车把模板中 如何仅使用模板将单选按钮组设置为正确的值 可以直接在模板中完成吗 例如 假设有一个如下所示的单选按钮组

随机推荐

热门标签