Express.js hbs module - register partials from .hbs file

Question

I\'m using the handlebars.js hbs wrapper in express.js. I have templates working fine, but I\'m needing to add in partials to be rendered with my views.

I\'d like to

Answer 1

Looks like creating a variable and pulling in the template code manually works:

var hbs = require('hbs')
  , fs = require('fs')
  , headerTemplate = fs.readFileSync(__dirname + '/views/_header.hbs', 'utf8');

and later:

hbs.registerPartial('headPartial', headerTemplate); 

Answer 2

My app structure (using ExpressJS & HBS-NPM) is:

  APP FOLDER
    -src
      app.js
      - routers
      - views
        -- partials
              header.hbs



const hbs = require('hbs')
hbs.registerPartials(path.join(__dirname,'views','partials'))

The above does the job of loading all partials in a single shot. Use this as long as you believe it doesn't impact your performance (loading all partials, even if not required).

And then, use this partial in any HBS file as follows:

{{> partial_file_name_without_hbs_extension}}

Example

 {{> header}

Answer 3

For me, I have a function like:

var hbs = require('hbs');
var fs = require('fs');    
var statupfunc = {
      registerHbsPartials : function(){
        //this is run when app start
        hbs.registerPartials(__dirname + "/" + resource.src.views + '/partials');        
      },
      registerOneHbsPartials : function(event){ 
        //this is run for gulp watch
        if(event.type == 'deleted')
        {
          return;
        }   
        var filename = event.path;
        var matches = /^.*\\(.+?)\.hbs$/.exec(filename);
        if (!matches) {
          return;
        }    
        var name = matches[1];    
        var template = fs.readFileSync(filename, 'utf8');    
        hbs.registerPartial(name, template);    
      }
    };

Run statupfunc.registerHbsPartials at app startup and then register gulp watch with statupfunc.registerOneHbsPartials to register partials on new creation

gulp.task('watch', function() {
    gulp.watch(resource.src.views +  '/partials/*.*', statupfunc.registerOneHbsPartials);
});

Answer 4

For convenience, registerPartials provides a quick way to load all partials from a specific directory:

var hbs = require('hbs');
hbs.registerPartials(__dirname + '/views/partials');

Partials that are loaded from a directory are named based on their filename, where spaces and hyphens are replaced with an underscore character:

template.html      -> {{> template}}
template 2.html    -> {{> template_2}}
login view.hbs     -> {{> login_view}}
template-file.html -> {{> template_file}}

Cheers!

Answer 5

For me I had template file my-partial.hbs

Then I tried to access them via:

{{> my-partial }}

But the partial was stored in hbs as my_partial regardless of the filename.

This is thanks to hbs version 3.1.0 line 218

.slice(0, -(ext.length)).replace(/[ -]/g, '_').replace('\\', '/');

This is in the readme

Answer 6

This code loads all the partial templates in a directory and makes them available by filename:

var hbs = require('hbs');
var fs = require('fs');

var partialsDir = __dirname + '/../views/partials';

var filenames = fs.readdirSync(partialsDir);

filenames.forEach(function (filename) {
  var matches = /^([^.]+).hbs$/.exec(filename);
  if (!matches) {
    return;
  }
  var name = matches[1];
  var template = fs.readFileSync(partialsDir + '/' + filename, 'utf8');
  hbs.registerPartial(name, template);
});