Error: Missing Helper in Handlebars.js
Solution 1
I figured it out...The helpers indeed need to be registered in the node app file like so:
// view engine
app.set('views', __dirname + '/views/');
app.set('view engine', 'handlebars');
var hbs = require('handlebars');
hbs.registerHelper("inc", function(value, options)
{
return parseInt(value) + 1;
});
app.engine('handlebars', engines.handlebars);
I wish this info was more easily accessible, but there it is.
Solution 2
Register a math handlebar and perform all mathematical operations.
app.engine('handlebars', exphbs({
helpers:{
// Function to do basic mathematical operation in handlebar
math: function(lvalue, operator, rvalue) {
lvalue = parseFloat(lvalue);
rvalue = parseFloat(rvalue);
return {
"+": lvalue + rvalue,
"-": lvalue - rvalue,
"*": lvalue * rvalue,
"/": lvalue / rvalue,
"%": lvalue % rvalue
}[operator];
}
}}));
app.set('view engine', 'handlebars');
Then you can directly perform operation in your view.
{{#each myArray}}
<span>{{math @index "+" 1}}</span>
{{/each}}
Solution 3
You don't need to add require('handlebars')
just to get helpers working. You can stick to express-handlebars. Define helpers in a config object like so var myConfig = { helpers: {x: function() {return "x";}} }
and pass it to the express-handlebars-object like so: require('express-handlebars').create({myConfig})
Here's a fully functional example with some helpers and some view directories configured.
var express = require('express');
var exphbs = require('express-handlebars');
var app = express();
var hbs = exphbs.create({
helpers: {
test: function () { return "Lorem ipsum" },
json: function (value, options) {
return JSON.stringify(value);
}
},
defaultLayout: 'main',
partialsDir: ['views/partials/']
});
app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');
app.set('views', path.join(__dirname, 'views'));
My understanding is that the object returned from require('express-handlebars');
is not a "real" handlebars object. So you can't rely on some functions, and instead you have to pass stuff like helpers via a config object to the .create()
function
Cameron Sima
Full stack React.js and Spring developer in the fintech industry.
Updated on August 13, 2021Comments
-
Cameron Sima over 2 years
I am using handlebars.js templates with node and express. I am making a numbered list using the
{{@index}}
template tag, however since index starts at 0 and I want to start from one, it seems I need to use a custom helper. I've seen plenty of posts regarding this and I've found the following code:Handlebars.registerHelper("inc", function(value, options) { return parseInt(value) + 1; }); {{#each score}} <li class="list-group-item"> <div id="place"> {{inc @index}}   </div> <div class="wordOrName">{{ player_name }}</div> <div class="number">{{ score }}</div></li> {{/each}}
What I cannot seem to find is where the helper register function is supposed to go. I've tried putting it inside in the template itself and in various other places but I still keep getting
Error: Missing helper: "inc" at model.<anonymous>
Ideally I'd like to have the helper in a separate file helpers.js but I don't have the slightest idea of how to get handlebars to recognize it.
EDIT:
Handlebars is included in the project with the following code inside the node file index.js:
// view engine app.set('views', __dirname + '/views/'); app.set('view engine', 'handlebars'); app.engine('handlebars', engines.handlebars);
It appears impossible to include the helper function within the template itself.
-
Cameron Sima over 8 yearsHandlebars is implemented in the index.js file, not in the html script. I tried this approach anyway and I still get the error
-
Nimesha Kalinga almost 6 yearsThis works when using express-handlebars instead of handlebars. Thank you
-
johan mårtensson over 5 yearsOr register '+' (lvalue, rvalue) => parseFloat(lvalue) + parseFloat(rvalue), and similar for '-', '*' and '/' if needed, and then use them as {{'+' @index 1}} if you dont need or want different operator implementations for different data types
-
SREE ANI almost 4 yearsIt is working in my development server,but not in production.And code is same.I tried the above code but didnt work.
-
Jason Norwood-Young about 3 yearsThis question is specifically about Node/Express, not a front-end implementation.
-
Kaia over 2 yearsCan you add some explanation for what your code here is doing and how it pertains to Handlebars.js