Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Handlebars helper in requireJS

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?

like image 546
Scott Silvi Avatar asked Oct 06 '22 17:10

Scott Silvi


1 Answers

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);
});
like image 72
nikoshr Avatar answered Oct 10 '22 03:10

nikoshr