Handlebars helper in requireJS

Question

I'm creating a helper to output 7 or 8 lines of HTML to clean up my templates (and comply with DRY - hey that rhymed - wikka wikka).

Here's an example of calling the addOn helper

{{#each promotion.CampaignColors}}
    {{{addOn . CampaignColorType.Code CampaignColorType.Name HexColor "some content" "a title"}}}
{{/each}}

Now, from what I understand, everything after the context should be a hash called options. Here is a stub of my addOn.js

define([
    'handlebars',
    'hbs!templates/addOn',
], function (Handlebars, AddOnTemplate) {
    function addOn(context, options) {
        var data = {};
        var compiledTemplate = AddOnTemplate(data);
        console.log(compiledTemplate);
        return compiledTemplate;
    }

    Handlebars.registerHelper('addOn', addOn);
    return new Handlebars.SafeString(addOn);
});

However, options is only set to my first parameter being passed. If I change my method signature to:

function addOn(context, key, displayName, value, content, title, test, options) {
...
}

.. each of my values are being set, and options NOW becomes an object with an empty hash.

Declaring the params explicitly works, but I'd much rather use the hash. Any thoughts on how to do this?

Answer 1

From Handlebars doc on helpers :

A Handlebars helper call is a simple identifier, followed by zero or more parameters (separated by space). Each parameter is a Handlebars expression.
[...]
Handlebars helpers can also receive an optional sequence of key-value pairs as their final parameter (referred to as hash arguments in the documentation). The keys in hash arguments must each be simple identifiers, and the values are Handlebars expressions. This means that values can be simple identifiers, paths, or Strings.

To use your parameters as a hash, you would call your helper as

{{{addOn . Code=CampaignColorType.Code HexColor=HexColor Content="some content"}}}

and they would be available as options.hash in your helper

define(['handlebars'], function (Handlebars) {
    function addOn(context, options) {
        console.log(options.hash);
    }

    Handlebars.registerHelper('addOn', addOn);
    return new Handlebars.SafeString(addOn);
});