Using variables for a partial template

Question

I'm definitely missing something about the way Handlebars works. I need to call different partials depending on the value of a variable. Currently the only way I've found to do it is this:

<template name="base">
  {{#if a}}{{> a}}{{/if}}
  {{#if b}}{{> b}}{{/if}}
  {{#if c}}{{> c}}{{/if}}
</template>

And in the corresponding JS:

Template.base.a = function () {
  return (mode === "a");
}

Template.base.b = function () {
  return (mode === "b");
}

Template.base.c = function () {
  return (mode === "c");
}

...which strikes me as extremely verbose. What I'd really like to do is something like:

<template name="base">
  {{> {{mode}} }}
</template>

In other words, the value of mode would be the name of the partial that is called.

This seems like it must be a very common use-case, but I can't find any examples of this online. Where have I gone wrong?

The official **dynamic partials** (from Joshua) really should be the default answer here. — mikemaccana, Apr 06 '16 at 16:02

mu is too short · Answer 1 · 2014-04-16T17:47:40.923

The partials are stored in Handlebars.partials so you can access them by hand in your own helper. There are a few tricky bits here though:

The contents of Handlebars.partials can be strings or functions so you have to compile the partials on first use.
Handlebars doesn't know if the partial will be text/plain or text/html so you'll need to call your helper in {{{...}}} or {{...}} as appropriate.
This stuff isn't exactly documented (at least not anywhere that I can find) so you have to reverse engineer the Handlebars source and fumble about with console.log(arguments) to figure out how to use Handlebars.partials.
You have to pass this by hand when you call the helper.

Fear not, it isn't really that complicated. Something simple like this:

Handlebars.registerHelper('partial', function(name, ctx, hash) {
    var ps = Handlebars.partials;
    if(typeof ps[name] !== 'function')
        ps[name] = Handlebars.compile(ps[name]);
    return ps[name](ctx, hash);
});

should do the trick. Then you can say:

{{{partial mode this}}}

and get on with more interesting things.

Demo: http://jsfiddle.net/ambiguous/YwNJ3/2/

Thanks for pointing this out! Like you say the official docs are REALLY bad when it comes to partials. — Fractalf, Mar 23 '14 at 02:36
@Fractalf: I hear you, the official "docs" leave much to be desired, I've had to go through the source code more than once to figure what's going on. — mu is too short, Mar 23 '14 at 02:40
if you need server-side version, you can find it here http://stackoverflow.com/a/27820812/1563880 — nktssh, Jan 07 '15 at 14:09

Joshua Gleitze · Answer 2 · 2016-11-07T18:59:23.260

Update for 2016: Version 3 of handlebars added Dynamic Partials. From the docs:

It's possible to dynamically select the partial to be executed by using sub expression syntax.

{{> (whichPartial) }}

Will evaluate whichPartial and then render the partial whose name is returned by this function.

Subexpressions do not resolve variables, so whichPartial must be a function. If a simple variable has the partial name, it's possible to resolve it via the lookup helper.

 {{> (lookup . 'myVariable') }}

Using variables for a partial template

2 Answers2

Linked