handlebars-webpack-plugin
handlebars-webpack-plugin copied to clipboard
Problem with helpers
Please, could you add an example of a helper and how to use it. I can register a helper, but when I append it to a template, the helper did not render.
My helper is:
// helpers/salutation.js
module.exports = function(context, options) {
return 'Hi, everybody';
};
and my template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>{{htmlWebpackPlugin.options.title}}</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
{{salutation}}
</body>
</html>
Hi ivanchuk.
To better debug helpers i suggest you add an argument to it. i.e. call {{salutation "test-run"}}
. If the partial was not loaded, handlebars will throw an error Error: Missing helper: "salutation"
. Without an argument it will fail silently.
If a helper was registered, a message is logged: HandlebarsPlugin: registering helper <name>
.
The safest way to register a helper might to use an expression function like
helper: {
salutation: function(context, options) {
return 'Hi, everybody';
}
}
or you could require it, which throws an error if it not found
helper: {
salutation: require("./app/helpers/salutation.helper")
}
In case you want to register multiple helpers in a single statement, you can use a path with wildcards, like
helper: {
"anIdThatWillBeIgnored": path.join(__dirname, "app/helpers/*.helper.js")
}
In the last cases, the helper function looks like
// app/helpers/salutation.helper.js
module.exports = function(context, options) {
return 'Hi, everybody';
};
Just remember: A helper is assigned by its filename (without its js-extensions). If a filename.helper.js is found, helper.js will be stripped from the name, resulting in filename.
i.e. adding a helper-file salutation.helper.js
will be registered with {{salutation}}
adding a helper-file salutation.js
will also be registered with {{salutation}}
.
Hope this helps. Regards
solved, thank you, very much
this in webpack config: helpers: [path.join(process.cwd(), 'src', 'templates', 'helpers', '**', '.js')],* this in a helper (code.js): module.exports = function(context, options) { return 'foo'; }; this in a template: {{code 'test-param'}}
2016-12-05 20:01 GMT+01:00 Sascha Goldhofer [email protected]:
The safest way to register a helper might to use an expression function like
helper: { salutation: function(context, options) { return 'Hi, everybody'; } }
or you could require it, which throws an error if it not found
helper: { salutation: require("./app/helpers/salutation.helper") }
In case you want to register multiple helpers in a single statement, you can use a path with wildcards, like
helper: { "anIdThatWillBeIgnored": path.join(__dirname, "app/helpers/*.helper.js") }
Hope this helps. Regards
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/sagold/handlebars-webpack-plugin/issues/8#issuecomment-264944037, or mute the thread https://github.com/notifications/unsubscribe-auth/ABQ5LrgYi2ZC6xXqnb_-xD3nyTogSM9uks5rFF-jgaJpZM4LEeti .
How would this work if you had all your helpers in one file?
Hi jshjohnson.
You can always manually register partials in the plugin config like
{
onBeforeAddPartials: function (Handlebars) {
const helpers = require("../.../helpers.js");
Object.keys(helpers).forEach((id) => {
Handlebars.registerPartial(id, helpers[id]);
});
}
}
Ah I solved it by doing this:
{
...
helpers: require(path.join(process.cwd(), 'src/helpers/helpers.js'))
}
And exporting each function in that file
Thank you a lot.
I've finally coded my own plugin, because I need more control and a bootstrap 4 support in a near future
🤘
@sagold can you please add the details in your comment to the readme documentation: https://github.com/sagold/handlebars-webpack-plugin/issues/8#issuecomment-264944037
The documentation says that you can register helpers but it doesn't really fully explain how to register helpers.
Since the syntax is different from the typical Handlebars.registerHelper
syntax it's vital that it is covered in the documentation.
Hi, what would be the best way to import the helpers of this package?
https://github.com/helpers/handlebars-helpers
Nevermind ^^ just put ...handlebarsHelpers
into helpers: { }
Thank you, for posting the solution!
@Mycl95 Can you tell me more on how you imported the helpers of handlebars-helpers? Somehow I cannot figure it out. Thanks!
@buc-htl3r I cannot remember so well but it should be pretty much be done like that:
// import the helpers
const handlebarsHelpers = require('handlebars-helpers');
// configure the plugin
new HandlebarsWebpackPlugin({
// other config
helpers: {
// other helpers
...handlebarsHelpers
}
// or if you are using only the helpers
helpers: handlebarsHelpers
})