Home Handlebars If-Else If-Else With String Equality Function
Reply: 1

Handlebars If-Else If-Else With String Equality Function

gene b.
1#
gene b. Published in 2017-12-06 19:03:06Z

HandlebarsJS doesn't support string equality ('==') so I have to write my own helper, but this answer isn't clear:

https://stackoverflow.com/a/15095019/1005607

Handlebars.registerHelper('if_eq', function(a, b, opts) {
    if(a == b) // Or === depending on your needs
        return opts.fn(this);
    else
        return opts.inverse(this);
});

and then adjust your template:

{{#if_eq this "some message"}}
    ...
{{else}}
    ...
{{/if_eq}}

1) Why is he doing {{#if_eq ..}} rather than {{#if if_eq .. }} ?

2) I also need to do ELSE-IF, which is supported since Handlebars 3.0.0 (I have 4.0). But using his notation, I wouldn't be able to do {{#elseif_eq}} there is no such expression. How would I implement an ELSE-IF with this custom helper?

76484
2#
76484 Reply to 2017-12-07 02:27:43Z

The helper in your example is a block helper. The helper is aptly named if_eq because it two expressions and, if those expressions are equal, it renders what is in the block. The return opts.inverse(this); line does the job of rendering the else block if the expressions are not equal (see: http://handlebarsjs.com/block_helpers.html#conditionals).

If you want to be able to chain else if conditionals in your template, then you cannot use a custom block helper. Instead you must use a regular (non-block) Handlebars helper. Whereas a block helper will render a block of template, a regular helper will return a value. In your case, we would return a Boolean indicating whether or not all arguments are equal. Such a helper could look like the following:

Handlebars.registerHelper('eq', function () {
    const args = Array.prototype.slice.call(arguments, 0, -1);
    return args.every(function (expression) {
        return args[0] === expression;
    });
});

You would use this helper in your template in the following manner:

{{#if (eq val1 val2)}}
    <p>IF Branch</p>
{{else if (eq val2 val3)}}
    <p>ELSE IF Branch</p>
{{else}}
    <p>ELSE Branch</p>
{{/if}}

Please note the parentheses as in the code (eq val1 val2). These parentheses are required because our eq evaluation is a subexpression within the #if expression. The parentheses tell Handlebars to pass the result of the equality check to the #if block helper.

I have created a JS Fiddle for your reference.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.313805 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO