Handlebars.js has partials, which you define and register separately with a <script> template snippet and a Javascript call to registerPartial. I find that cumbersome and I prefer the Jinja style of defining macros, which you do in the same template language.

Is there a helper out there that would let me do something like this:

{{#macro macro-name}}
  This is {{ bar }} and this is {{ foo }}
{{/macro}}

{{macro-name bar="BAR"}} {{! foo would be searched in the outer context}}

I've searched without luck.

Handlebars.js has partials, which you define and register separately with a <script> template snippet and a Javascript call to registerPartial. I find that cumbersome and I prefer the Jinja style of defining macros, which you do in the same template language.

Is there a helper out there that would let me do something like this:

{{#macro macro-name}}
  This is {{ bar }} and this is {{ foo }}
{{/macro}}

{{macro-name bar="BAR"}} {{! foo would be searched in the outer context}}

I've searched without luck.

• javascript
• templates
• reusability
• handlebars.js

Share Improve this question Follow edited Jul 29, 2013 at 21:31 ateijelo asked Jul 29, 2013 at 21:24 ateijeloateijelo 28011 silver badge88 bronze badges 1

• you can use other methods of finding the code on the page and feeding it to handlebars as a function. – dandavis Commented Jul 29, 2013 at 21:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Ok, after a few hours of reading about partials and scratching my head I came up with this:

Handlebars.registerHelper('macro', function (name, defaults) {
    // The following helper will be registered with the name
    // given as the first parameter of the macro helper.
    // Upon invocation, variables will be looked up in the
    // following order: invocation arguments, default values
    // given in the macro definition (stored in defaults.hash),
    // and finally in the invocation context.
    Handlebars.registerHelper(name, function (options) {
        // options.hash has the parameters passed to
        // the defined helper in invocation, who
        // override the default parameters and the current context.
        var e = $.extend(this, defaults.hash, options.hash);

        // and here's where all the magic happens:
        return new Handlebars.SafeString(defaults.fn(e));
    });
});

You can define a macro like this:

{{#macro "macro-name" param1="bar" param2="" param3="egg"}}
  {{ param1 }}
  {{#each param2 }}
    {{ param3 }}
    {{ some_value }} {{! this one is looked up in the current context }}
  {{/each}}
{{/macro}}

And invoke it like this:

{{macro-name param1="foo" param2=some_array_in_context}}

The first parameter of the definition is the macro name. All other parameters must be in param=value format.

I've used it for a couple of hours now. I found some bugs but fixed them and I find it useful. It surprised me how little the final code resulted. The really magical part is that you can use a helper not to return a string but to define a new helper.

It requires jQuery, but hey, what doesn't :-)

The current way to acplish this is to use inline partials. You can define these programmatically or in your template using inline partials:

{{#*inline "myPartial"}}
  {{param1}}
{{/inline}}

{{> myPartial param1="foo" }}