How to configure partials and layouts for Handleba

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 files, 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 solution but any help will be appreciated.

Answer 1

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.

Answer 2

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

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

Here's what I have.

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

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

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

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

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/

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

Answer 5

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 6

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.