Calling Helper Within If Block in Handlebars Template

Question

I am working with Handlebars.js template engine and am trying to figure out a way to do something like this (contrived example):

{{#if itemSelected "SomeItem"}}
    <div>This was selected</div>
{{/if}

where itemSelected is a registered helper like this:

Handlebars.registerHelper("itemSelected", function(item) {
    var selected = false;
    // Lots of logic that determines if item is selected
    return selected;
});

I get errors when trying to use this syntax for the template, and I cannot find any example showing this kind of thing. I do see simple #if blocks like this...

{{#if myValueInContext}}
    <div>This will show if myValueInContext results in a truthy value.</div>
{{/if}}

But, I can't figure out how to tackle the first example. Maybe I am approaching this wrong.

By the way, I tagged this Mustache as I could not add a Handlebars tag to the question.

Answer 1

I don't think this is going to work. If I understand the handlebars documentation correct, the #if is a registered block-helper itself and does not take another registered helper as an argument.

According to the documentation you might implement it like that

Handlebars.registerHelper('ifItemSelected', function(item, block) {
  var selected = false;
  // lots of logic that determines if item is selected

  if(selected) {
    return block(this);
  }
});

Afterwards you should be able to call it with

{{#ifItemSelected SomeItem}}
    This was selected
{{/ifItemSelected}

but you have to make sure SomeItem has the proper format. I don't see a way to use a registered handler as conditional in an if-statement.

Answer 2

You should add parentheses around the embedded helper invocation:

{{#if (itemSelected "SomeItem")}}
    <div>This was selected</div>
{{/if}

I did experiments and verified that it just works.

Not sure if it's mentioned in the Handlebars documentation. I learned the trick from the examples of handlebars-layouts.

Answer 3

With last version (1.0.rc.1) of Handlebars, you have to write sth like:

Handlebars.registerHelper('ifItemSelected', function(item, options) {
  var selected = false;
  // lots of logic that determines if item is selected

  if (selected) {
    return options.fn(this);
  }
});

ie. block(this) is replaced by options.fn(this)

http://handlebarsjs.com/block_helpers.html#conditionals

Answer 4

If you want to have an else option too, you will need this code:

Handlebars.registerHelper('ifItemSelected', function(item, options) {
  var selected = false;
  // lots of logic that determines if item is selected

  if (selected) {
    return options.fn(this);
  }
  else {
   return options.inverse(this);
 }
});

Used with:

{{#ifItemSelected SomeItem}}
    This was selected
{{else}}
    This was not selected
{{/ifItemSelected}