Skip to content

Instantly share code, notes, and snippets.

@pheuter
Created August 29, 2012 17:33
Show Gist options
  • Save pheuter/3515945 to your computer and use it in GitHub Desktop.
Save pheuter/3515945 to your computer and use it in GitHub Desktop.
Handlebars.js equality check in #if conditional

Handlebars.js is a template framework for Javascript environments. It allows the construction of HTML elements using HTML and expressions wrapped in {{ }}

Limitations of {{if}}

One of the conditional block helpers Handlebars offers is the {{#if}}.

For example:

<div class="entry">
  {{#if author}}
    <h1>{{firstName}} {{lastName}}</h1>
  {{else}}
    <h1>Unknown Author</h1>
  {{/if}}
</div>

Unfortunately, that's about all you can do with the if out of the box. Luckily, Handlebars provides means of working with such expressions as well as adding your own. Using the registerHelper method, we will change the if block to support testing for property equality.

registerHelper

To do so, we will pass registerHelper a modified version of the if function where we utilize Handlebars' ability to parse key-value attributes in expressions:

Handlebars.registerHelper("if", function(conditional, options) {
  if (options.hash.desired === options.hash.type) {
    options.fn(this);
  } else {
    options.inverse(this);
  }
});

Now, our modified if expressions look something like this:

{{#if type desired="image" type=type}}
  <div class="msg img">
    <strong>{{user}}</strong> <i>shared an image</i>
    <br />
    <a href="{{file}}"><img src="{{file}}" /></a>
  </div>
{{/if}}

where type is a property of this in our current scope, and "image" is a possible value for type.

Of course, you may want to define your own block expression instead of overriding the default {{#if}}, but the idea holds.

@rohitsharma00013
Copy link

Where has to put Handlebars.registerhelper)........ code ?

@NagatoPeinI1
Copy link

@thomasvanlankv I tried your method but it is giving me an error ::: result = operators[operator](lvalue, rvalue); is not a function.

@NagatoPeinI1
Copy link

Can anyone can explain how this handlebars.registerHelper are able to get the value for that function.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment