Handlebars.js is a template framework for Javascript environments. It allows the construction of HTML elements using HTML and expressions wrapped in {{ }}
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.
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.
@Romanulus It's not always possible to do that in a reasonable way. For example, if you are in a loop, and for certain items in the loop you want to change the behaviour, maybe add a new css class. Without an conditionals with equality in the handlebars, you are required to pull this presentation logic back int your handler/controller layer. It can easily be done like that, but now you're mixing presentation logic with business/data logic.
Being able to do something like
loop over this data, and when you see one with property x=y, display it like this
seems like presentation logic and reasonable to be in the handlerbars template.