【问题标题】:How to configure partials and layouts for Handlebars in Sails.js?如何在 Sails.js 中为 Handlebars 配置部分和布局?
【发布时间】:2013-11-17 14:33:50
【问题描述】:

我运行Sails 0.9.7 并安装了Handlebars,它由Consolidate.js 支持,因此是supported by Sails

我可以提供来自.handlebars 文件的页面,它工作得很好。 我不知道在 Sails 工作流程中,以 Sails 方式,我应该在哪里注册部分、助手等...我更多的是寻找最佳实践,而不仅仅是 工作解决方案 但我们将不胜感激。

【问题讨论】:

  • 我遇到了同样的问题。我尝试过制作视图/部分/并将它们放在那里,我尝试过在视图/和视图// 甚至视图//partials/ :-(
  • 我认为 Sails 不会自动拾取这些。 cmets 很清楚 Layout support is only implemented for the ejs view engine! For most other engines, it is not necessary, since they implement partials/layouts themselves 它只是没有说明应该如何/在哪里完成。
  • 我不知道我是否准备好放弃它。下面,它只是快递,对吧?经过一些调整后,我使用了其他带有 Express 的模板引擎。这就是我想要用 Sails 做的事情:bearfruit.org/2013/08/22/…

标签: javascript handlebars.js sails.js


【解决方案1】:

我正在运行 v0.10 测试版,但这不应该影响我在下面的工作方式:

  1. 引擎应该像预期的那样车把
  2. 路由需要明确定义控制器和动作。设置视图不起作用。 (除非有一种方法我无法在路由文件中设置部分)
  3. 控制器需要将部分定义为相对于视图的路径。

config/views.js

module.exports.views = {
  engine      : 'handlebars',
  layout      : false
};

config/routes.js

'/': {
  controller: 'site',
  action: 'index'
},

SiteController.js

module.exports = {
  // Render Index View
  index: function(req, res) {
    res.view({
      partials: {
        head: 'partials/head',
        tail: '../partials/tail',
      },
    });
  }
};

views/site/index.handlebars

{{> head}}
<h3>SITE INDEX</h3>

views/site/partials/head.handlebars

<h1>HEAD</h1>
{{> tail}}

views/partials/tail.handlebars

<h2>HEAD TAIL</h2>

输出

<h1>HEAD</h1>
<h2>HEAD TAIL</h2>
<h3>SITE INDEX</h3>

【讨论】:

  • 是的,所以它与@christopher-pappas 的回答基本相同,还是我误解了什么?感谢您的详细回答。
  • 他的回答不完整——你必须在路由定义中明确设置控制器和操作——这是我让它工作的唯一方法——但我已经转向 nunjucks 进行模板继承
  • 好的,我想这是我可以使用原始风帆的极限,然后我需要编写某种策略或插件来仅声明一个 partials 文件夹,并让 partials 选项成为自动填充我放入部分文件夹中的所有部分。感谢您的完整回答。
  • @JeremieParker 我通过将所有部分作为对象文字存储在 config/views.js 中解决了这个问题,然后在我渲染新视图时使用下划线克隆该对象:res.view({ partials: _.clone(sails.config.views.partials) }); Still没有运气弄清楚如何集成助手,所以如果有人知道,请分享。
  • 我也用 nunjucks。我需要改变什么才能让 nunjucks 工作?
【解决方案2】:

我正在使用上面给出的答案,但我似乎已经在没有 hacks 的情况下使部分代码与sails 0.9.8 一起工作。

这就是我所拥有的。

配置/views.js => 引擎:“车把”

views/home/index.handlebars => 使用部分主文件。

views/home/partials/partial.handlebars => 部分正在使用。

那么只要你使用这样的东西,它就可以完美地工作。 res.view({ 部分:{ 部分:'部分/部分', 页脚:'部分/页脚' } })

路径相对于默认调用的模板文件。因此,如果您希望每个控制器有不同的部分,您可以使用 partials/ 如果你想要所有模板的全局部分,你使用 ../partials/

显然这完全适合您,因为无论如何您都需要在控制器中手动指定每个部分。

【讨论】:

  • 是的,我也想通了,但我更多的是寻找一种从模板本身调用部分的方法,{{&gt; partial }}。感谢您的帮助。
  • 所以遵循上述-我通过{partials: {header: 'partials/header'}}并调用部分{{&gt; header}}。我收到以下错误消息:verbose: Running res.view([object Object]) method... error: Error rendering view at :: error: Using layout located at :: error: Server Error (500) error: Error: The partial header could not be found
  • 部分实际保存在哪里?文件夹部分应该和模板在同一个地方,并且里面应该有一个名为 header.handlebars 的文件,这样行吗?
  • 杰里米,我猜你想要一种能够从模板中导入部分的方法,所以你可以使用 {{> path to partial}} 我喜欢这样的解决方案,但 Handlebars 似乎以一种需要注册所有部分的方式进行编码,遗憾的是。
  • npm 上有一个叫 mmm 的模块,和 mustache 一样,会自动按路径名查找partials。我以前用过快递。它没有额外的车把功能,但通常足够好。
【解决方案3】:

编辑:这很容易通过 express3-handlebars 模块实现,同时不更改任何默认的 Sails 功能,除了要求您将布局文件移动到 views/layouts 之外。如果您想查看它,我已经在这里(https://github.com/balderdashy/sails/pull/1075)打开了一个拉取请求。


在对sails 源代码进行了一些研究之后,在渲染视图时很容易引入局部视图。

当您在控制器操作中调用res.view 时,只需传入一个partials 对象作为“locals”的一部分,其中包含您想要渲染的partials 列表。

  // LoginController.js
  new: function (req, res) {
    res.view({
        partials: { 
          header: '../partials/header',
          footer: '../partials/footer'
        }
    })
  }

  // new.handlebars
  {{> header}}
      <b>Main content</b>
  {{> footer}}

可以通过类似的方式注册助手,方法是附加一个名为 helpers 的密钥并传入功能。

如果在 Sails 核心中有更正式的方法来执行此操作会很好,但现在这对于那些想要使用把手而不是 ejs 同时保留一些布局外观的人来说应该足够了。

【讨论】:

  • 需要明确的是,如果您的拉取请求被合并,我很乐意接受您的回答,否则,考虑到我们希望成为能够更新 Sails(以利用即将到来的功能,例如事务),而无需每次都打补丁。同时,我赞成你的答案,因为它实际上接近我正在寻找的东西,但不像我希望的那样可重复使用。
  • 同意。我对帆越舒服,我就越能破解核心来实现我所需要的。不幸的是,但框架又是新的。只是想指出一条路;)
  • 这对我不起作用。使用绝对路径和相对路径失败。
  • partials 文件夹应该放在哪里? .. 是相对于父视图吗?它应该存在于视图/部分中吗?
  • 它应该存在于视图/部分中。但请记住,sails 0.10 有很大不同,所以我会避免上述情况;我尝试重构它,但似乎sails.js 决定留下一个硬.ejs 依赖,转而支持类似插件的架构(尚未编写/记录)
【解决方案4】:

仅供参考,

如果您使用的是 Sails 0.10 或更高版本,我已经发布了一个 NPM 包以在 https://www.npmjs.org/package/sails-generate-views-handlebars 处生成默认车把视图

还有一个针对sails-generate-backend 的建议PR,以便在使用“sails generate –template==handlebars”时正确支持车把的布局和部分,而无需额外的代码并根据路径自动发现部分( aka.views/partial/**)

见:https://github.com/balderdashy/sails-generate-backend/pull/9

【讨论】:

    【解决方案5】:

    我的时间不多了,但我想我已经接近答案了。当我获得更多详细信息时,我会更新此回复,但如果您想查看它,请查看包含的 consolidate.js 文件中的第 501 行。在 github 上查看:https://github.com/balderdashy/sails/blob/master/lib/configuration/consolidate.js#L501

    对于 Handlebars 来说,似乎有一个 for 循环可以从 options.partials 中注册部分内容。

    这并不是一个非常令人满意的解决方案,但是如果您将部分内容推送到该选项对象上,那么它可能会从中拉出。

    接下来我要问的一个大问题是,options 对象是什么,它在哪里设置?

    【讨论】:

    • options 对象是从您的视图控制器传入的locals 变量中读取的。请参阅上面的答案。
    【解决方案6】:

    要在sails js中配置车把模板,请按照以下步骤操作:

    1) 在应用程序的 node_modules 文件夹中安装把手:

    npm 安装车把

    2) 更改您的配置/views.js

    engine:   'handlebars',
    layout:   'layouts/layout', // layouts is subfolder of view folder in sails app and layout is a handlebars inside layouts folder.
    partials: 'partials'
    

    【讨论】:

      【解决方案7】:

      如果我们对文件使用 .handlebars 扩展名而不是 .hbs,Sails 本身就支持把手及其(多布局、部分)。

      所以要在 Sails 中使用把手而不是 EJS,建议使用 consolidate(它是一个模板引擎安慰库)。 Handlebars 与 SailsJs + consolidate 配合使用效果很好。

      您需要安装合并。

      npm install consolidate --save
      

      然后您只需使用以下内容更新 config/views.js 文件。

      module.exports.views = {
      
      engine: {
          ext: 'handlebars',
          fn: require("consolidate").handlebars
        },
      
      layout: 'layouts/layout',
      
      partials: 'partials/'
      
      };
      

      将所有 .ebs 文件更新为 .handlebar 文件并更新其中的代码。

      一切都会好起来的。

      有一个view-generator,用于以后的目的,它将为 Sails 生成默认视图(它将创建一个包含默认文件的默认目录结构)。

      您可以在 github 存储库中找到它。(https://github.com/bhaskarmelkani/sails-generate-views-hbs)

      类似于 SailsJs 为翡翠官方推出的名为 balderdashy/sails-generate-views-jade 的。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2013-07-19
        • 1970-01-01
        • 2015-08-08
        • 2016-10-03
        • 1970-01-01
        • 1970-01-01
        • 2012-08-16
        相关资源
        最近更新 更多