Handlebars.js if block helper ==

Question

How would you change the following code to make it work? The problem is the this == 'some message' expression:

<ul>
  {{#each errors}}
    {{#if (this == 'some message') }}
    <li>Status</li>
    {{else}}
    <li>{{this}}</li>
    {{/if}}
  {{/each}}
</ul>

mu is too short · Accepted Answer · 2014-03-02T06:11:31.187

96

The easiest thing would be to add a custom if_eq helper:

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}}

Demo: http://jsfiddle.net/ambiguous/d4adQ/

If your errors entries weren't simple strings then you could add "is this some message" flags to them and use a standard {{#if}} (note that adding a property directly to a string won't work that well):

for(var i = 0; i < errors.length; ++i)
    errors[i] = { msg: errors[i], is_status: errors[i] === 'some message' };

and:

{{#if is_status}}
    <li>Status</li>
{{else}}
    <li>{{msg}}</li>
{{/if}}

Demo: http://jsfiddle.net/ambiguous/9sFm7/

edited Mar 02 '14 at 06:11

answered Feb 26 '13 at 17:05

mu is too short

426,620
70
833
800

If `{{#if_eq this "some message"}}` works, why not `this.someProperty`? Can't get that to work. – raffian Dec 29 '13 at 05:06
@raffian: Do you have an example (perhaps a modification of one of the fiddles in the answer) of what you're trying to do? – mu is too short Dec 29 '13 at 05:07
..was building a fiddle, then noticed my custom helper ended with `{{/if}}`, not `{{/if_eq}}`, unbelievable, wasted hours on this, but thank you for opening my eyes :-) – raffian Dec 29 '13 at 05:48
@raffian: No worries, some of the hardest bugs to spot are the ones right in front of your face. – mu is too short Dec 29 '13 at 05:49
2

I am noob in hadlebars, can i know what is 'opts' param is for ? – ajduke Mar 02 '14 at 05:14
@ajduke: the arguments from the template are in the normal `a` and `b` arguments, `opts` Comes from Handlebars itself to give your block helper callbacks, you can `console.log(arguments)` inside your helper to get a better idea of what's in it. – mu is too short Mar 02 '14 at 06:41
1

@Kunok The `opts.fn` function is for the "if" branch, `opts.inverse` is for the `else` branch. – mu is too short Nov 21 '16 at 17:31
Thank you, this perfectly for me. – user752746 Jun 29 '17 at 04:43

score 11 · Answer 2 · answered Mar 07 '14 at 09:44

11

Old question, but if you use Elving's Swag Handlebars helpers library, you can use the helpers is and isnt.

answered Mar 07 '14 at 09:44

Matt Fletcher

8,182
8
41
60

This library is very useful! – caballerog Apr 20 '16 at 08:36

score 7 · Answer 3 · answered Sep 30 '15 at 08:41

This can also be achieved by using Handlebars Subexpressions.

Template -

    <script id="tmplStatus" type="text/x-handlebars">
        <ul>
            {{#each errors}}
                {{#if (is_status this 'some message')}}
                    <li>Status</li>
                {{else}}
                    <li>{{this}}</li>
                {{/if}}
            {{/each}}
        </ul>
    </script>

Javascript -

var errors = [
        'Where is pancakes house?',
        'some message',
        'One cent stamp'
    ];

    Handlebars.registerHelper('is_status', function(msg, matchMsg, options) 
    {
        if(msg === matchMsg)
            return true;
        else
            return false;
    });

    var tmplStatus = Handlebars.compile($('#tmplStatus').html()),
        domStatus = tmplStatus({ errors: errors });
    $('body').append(domStatus);

Working Demo : http://jsfiddle.net/techgeeek/b99qwtpw/

For reusability it would make more sense to name the helper is_equal or something to that effect, no point tying it directly to status. — Mike Mellor, Feb 11 '16 at 16:49

Handlebars.js if block helper ==

3 Answers3

Linked