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

Question

I run Sails 0.9.7 and have installed Handlebars which is supported by Consolidate.js and therefore is supported by Sails

I can serve pages from .handlebars

Answer 1

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.

---

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

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

  // 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 helpers and passing in the functionality.

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.

Answer 2

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

1. Engine should be handlebars as 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.

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>

OUTPUT

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

Answer 3

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

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

npm install handlebars

2) change your 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'

Answer 4

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

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/**)

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

Answer 5

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

It looks like for Handlebars there is a for loop that registers partials from 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?

Answer 6

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

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.

You need to install consolidate.

npm install consolidate --save

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

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.

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).

You can find it in the github repository.(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.