javascript 如何在 Sails.js 中为 Handlebars 配置部分和布局？

How to configure partials and layouts for Handlebars in Sails.js?

提问by Jérémie Parker

I run Sails 0.9.7and have installed Handlebarswhich is supported by Consolidate.jsand therefore is supported by Sails

我运行Sails0.9.7并安装了Consolidate.js支持的Handlebars，因此也受 Sails 支持

I can serve pages from .handlebarsfiles, it works just fine. I can't figure where, in Sails workflow, and in a Sails way, I should register partials, helpers etc... I'm more looking for best practices than just a working solutionbut any help will be appreciated.

我可以从.handlebars文件中提供页面，它工作得很好。我不知道在 Sails 工作流程中的何处，以及在Sails 方式中，我应该注册部分、助手等......我更多地寻找最佳实践而不仅仅是一个工作解决方案，但任何帮助将不胜感激。

采纳答案by robertmoggach

I'm running v0.10 beta but this shouldn't affect how I got it working below:

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

1. Engine should be handlebarsas expected
2. Routes need to explicitly define controller and action. Setting view won't work. (Unless there's a way I couldn't figure out of setting the partials in the routes file)
3. Controller needs partials defined as paths relative to the view.

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

config/views.js

配置/views.js

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

config/routes.js

配置/routes.js

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

SiteController.js

站点控制器.js

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

views/site/index.handlebars

视图/站点/index.handlebars

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

views/site/partials/head.handlebars

意见/网站/部分/ head.handlebars

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

views/partials/tail.handlebars

意见/部分/tail.handlebars

<h2>HEAD TAIL</h2>

OUTPUT

输出

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

回答by Naman Goel

I'm using the answers given above, but I seem to have made partials work with sails 0.9.8 with no hacks.

我正在使用上面给出的答案，但我似乎已经使部分工作与帆 0.9.8 一起工作，没有任何黑客攻击。

Here's what I have.

这就是我所拥有的。

Config/views.js => engine: "handlebars"

Config/views.js => 引擎：“把手”

views/home/index.handlebars => main file using the partial.

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

views/home/partials/partial.handlebars => partial being used.

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

Then as long as you use something like this, it works perfectly. res.view({ partials: { partial: 'partials/partial', footer: 'partials/footer' } })

那么只要你使用这样的东西，它就可以完美运行。res.view({局部：{局部：'局部/局部'，页脚：'局部/页脚'}})

The paths are relative to the template file called by default. So if you want different partials per controller you use partials/ and if you want global partials for all templates you use ../partials/

路径相对于默认调用的模板文件。因此，如果您希望每个控制器使用不同的部分，则使用 partials/ 并且如果您希望所有模板的全局部分使用 ../partials/

Obviously this is completely unto you as you need to specify every partial manually in the controller anyway.

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

回答by cnp

Edit: This was fairly easy to implement via the express3-handlebars module while changing none of the default Sails functionality with the exception of asking you to move your layout file into views/layouts. I've opened up a pull-request here (https://github.com/balderdashy/sails/pull/1075) if you would like to check it out.

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

---

---

After a bit of digging in the sails source-code, it's fairly easy to bring in partials when you render your view.

在对sails 源代码进行了一些挖掘之后，在渲染视图时引入部分是相当容易的。

When you call res.viewin your controller actions, just pass in a partials object as part of your "locals" which contains a list of partials you'd like rendered.

当您调用res.view控制器操作时，只需传入一个部分对象作为“本地”的一部分，其中包含您想要呈现的部分列表。

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

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

Helpers can be registered in a similar way, by attaching a key named helpersand passing in the functionality.

可以以类似的方式注册助手，通过附加一个命名的键helpers并传入功能。

It would be nice if there was a more formalized way to do this in the Sails core, but for now this should suffice for those who want to use handlebars instead of ejs while preserving some semblance of layouts.

如果在 Sails 核心中有一种更正式的方法来做到这一点会很好，但现在这对于那些想要使用把手而不是 ejs 的人来说已经足够了，同时保留了一些外观的布局。

回答by Jim Texier

FYI,

供参考，

If you're using Sails 0.10 or above, I have published an NPM package to generate default handlebars views at https://www.npmjs.org/package/sails-generate-views-handlebars

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

There is also a proposed PR for sails-generate-backend in order to properly support layouts and partials for handlebar when using ‘sails generate –template==handlebars' with no additional code and automatic discovery of partials based on a path (aka. views/partial/**)

为了在使用“sails generate –template==handlebars”时正确支持把手的布局和部分，而没有额外的代码和基于路径（又名视图）的自动发现/部分的/**）

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

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

回答by newz2000

I'm running out of time but I'm getting close to an answer, I think. I'll update this reply when I get more details, but if you want to poke at it, check out line 501 in the included consolidate.js file. View on github here: https://github.com/balderdashy/sails/blob/master/lib/configuration/consolidate.js#L501

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

It looks like for Handlebars there is a for loop that registers partials from options.partials.

看起来 Handlebars 有一个 for 循环，可以从 options.partials 注册部分。

That is not exactly a very satisfying solution, but if you push your partials on to that options object then maybe it will pull from that.

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

The big question I have next is, what is the options object, and where does it get set at?

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

回答by Siyaram Malav

For configuring handlebars template in sails js , follow below steps:

要在sails js中配置把手模板，请按照以下步骤操作：

1) install handlebars in your application's node_modules folder:

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

npm install handlebars

npm 安装把手

2) change your config/views.js

2) 改变你的 config/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'

回答by Bhaskar Melkani

Sails supports handlebars and its (multiple-layout, partials) natively, if we use .handlebars extensions for our files instead of .hbs.

如果我们为我们的文件使用 .handlebars 扩展名而不是 .hbs，Sails 本身就支持把手及其（多重布局，部分）。

So to use handlebars in Sails instead of EJS, it advised to use consolidate(Its a template engine consolation library). Handlebars works good with SailsJs + consolidate.

所以要在 Sails 中使用把手而不是 EJS，建议使用consolidate（它是一个模板引擎安慰库）。Handlebars 适用于SailsJs + consolidate。

You need to install consolidate.

你需要安装consolidate。

npm install consolidate --save

And then you just have to update the config/views.jsfile with the following content.

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

module.exports.views = {

engine: {
    ext: 'handlebars',
    fn: require("consolidate").handlebars
  },

layout: 'layouts/layout',

partials: 'partials/'

};

Update all your .ebs files to .handlebar files and update the code inside it.

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

Everything will work fine.

一切都会好起来的。

There is a view-generator, for the later purpose which will generate default views for Sails(It will make a default directory structure with default files in it).

有一个视图生成器，稍后会为 Sails 生成默认视图（它将创建一个默认目录结构，其中包含默认文件）。

You can find it in the github repository.(https://github.com/bhaskarmelkani/sails-generate-views-hbs)

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

It is similar to the one officially launched by SailsJs for jade called balderdashy/sails-generate-views-jade.

它类似于 SailsJs 为玉正式推出的名为 balderdashy /sails -generate-views-jade 的产品。