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.
I get not having business logic in the template, but having template logic in the template makes perfect sense. Like
{{#if page === currentPage}}...{{/if}}
. That doesn't belong in a controller or a helper. Having to make a helper for that situation is overkill and not the right place for it.Also, adding a helper is only an option if you have control over everything. What about if you want to expose Handlebars as a templating engine for 3rd party users. You're not going to give random strangers full access to write whatever JS they want on your node server.
If you can't anticipate every helper a customer is going to need you are going to have a support nightmare and have to do new builds each time you add a helper.
I like the
compare
helper above.If you just need
===
you can do:You can implement them for
ifneq
,ifgt
,ifgte
, etc.