How to make a handlebars helper global (in expressjs)

馋奶兔 提交于 2019-12-03 13:23:42

问题


I've got a pretty simple handlebars helper file in helpers/handlebars.js:

var hbs = require('express-handlebars');

hbs.registerHelper("inc", function(value, options) {
    return parseInt(value) + 1;
});

However, as expected, I can't refer to the {{#inc}} helper because I didn't pass it into the res.render() function. Is there a way to make all helpers in my file global and "auto-included"?

edit:

After trying @1cgonza's awesome answer, I get:

hbs.registerHelper("inc", function(value, options) {
      ^
TypeError: undefined is not a function

When running the app. Here's the app.js:

var engine      = require('express-handlebars');
                  require('./helpers/handlebars.js')(engine);

app.engine('hbs',           engine({defaultLayout: 'layout', extname: 'hbs'}));
app.set('view engine',      'hbs');

Any ideas?


回答1:


You could try exporting your helpers as a module and then include them in your main app.js

Something like this:

In your helpers/handlebars.js

function hbsHelpers(hbs) {
  hbs.registerHelper("inc", function(value, options) {
    return parseInt(value) + 1;
  });

  // More helpers...
}

module.exports = hbsHelpers;

Then in your app.js (or the file you are using as the index).

var hbs = require('express-handlebars');
require('./helpers/handlebars')(hbs);

Does that work for you?

EDIT

Based on the express-handlebars docs, I would change the function in your helpers/handlebars.js to something like this:

function hbsHelpers(hbs) {
  return hbs.create({
    helpers: { // This was missing
      inc: function(value, options) {
        console.log('reading it');
        return parseInt(value) + 1;
      }

      // More helpers...
    }

  });
}

module.exports = hbsHelpers;

Let us know if it works.

EDIT 2:

My Bad, wrapping your helpers inside a helpers:{} was missing from the create() function in the handelbars.js file. I've edited my previous answer, see where I placed the comment to know what I am talking about.

As for the app.js I think it is a little mixed up, so let me rename a few things to make it clear:

// I've changed this from engine to exphbs,
// so there is no confusion with the express engine object that we use later.
var exphbs = require('express-handlebars');

// Create an instance of the express-handlebars
// If you want to pass any option offered by express-handlebar module
// do it inside the create() in the handlebars.js file
var handlebars  = require('./helpers/handlebars.js')(exphbs);

// The handlebars variable now has an object called engine.
// Use that to define your app.engine
// As said before, you don't need to define any options here.
// Everything is defined in the create() in handlebars.js
app.engine('hbs', handlebars.engine);

// If you are using a different extension, you can change hbs to whatever you are using. 
app.set('view engine', 'hbs');



回答2:


you can try:

in helpers/handlebars.js:

var register = function(Handlebars) {
    var helpers = {
    inc: function(value, options) {
        return parseInt(value) + 1;
    },
    foo: function(var1, var2) {
        return ....
    }
};

if (Handlebars && typeof Handlebars.registerHelper === "function") {
    for (var prop in helpers) {
        Handlebars.registerHelper(prop, helpers[prop]);
    }
} else {
    return helpers;
}

};

module.exports.register = register;
module.exports.helpers = register(null); 

in app.js:

var exphbs = require('express-handlebars');
var hbsHelpers = exphbs.create({
    helpers: require("./helpers/handlebars.js").helpers,
    defaultLayout: 'layout',
    extname: '.hbs'
});

app.engine('.hbs', hbsHelpers.engine);
app.set('view engine', '.hbs');



回答3:


Here is my solution. You can register both your own customer helpers and the ones from 'handlebars-helpers':

const hbshelpers = require('handlebars-helpers');
const multihelpers = hbshelpers();

const helpersDM = {
    hlp: echo => `Echo: ${echo}.`,
    STATIC: `/static`,
};
const hbs = exphbs.create({
    layoutsDir: join(__dirname, 'views', 'layouts'),
    partialsDir: join(__dirname, 'views', 'partials'),
    extname: '.hbs',
    defaultLayout: 'base',
    helpers: {...multihelpers, ...helpersDM},
});
app.engine('.hbs', hbs.engine);
app.setViewEngine('.hbs');


来源:https://stackoverflow.com/questions/32707322/how-to-make-a-handlebars-helper-global-in-expressjs

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!