Multiple OR operators in a handlebars.js {{#ifEquals}} conditional

Question

I'm trying to do the following but I get an error:

{{#ifEquals nominatorRegion "BC Region" || nominatorRegion "Saskatchewan Region" || nominatorRegion "Alberta Region"}}

Error:

Uncaught Error: Parse error on line 60:
...rRegion "BC Region" || nominatorRegion "
-----------------------^
Expecting 'CLOSE_RAW_BLOCK', 'CLOSE', 'CLOSE_UNESCAPED', 'OPEN_SEXPR', 'CLOSE_SEXPR', 'ID', 'OPEN_BLOCK_PARAMS', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'CLOSE_BLOCK_PARAMS'
    at a.parseError (handlebars.min.js:28)
    at a.parse (handlebars.min.js:28)
    at d [as parse] (handlebars.min.js:27)
    at d (handlebars.min.js:28)
    at child.e [as template] (handlebars.min.js:28)
    at child.render (blog.js:289)
    at Object.BlogApp.fn.renderView (blog.js:1266)
    at success (blog.js:987)
    at parse-1.2.19.js:3858
    at wrappedResolvedCallback (parse-1.2.19.js:3762)

My Handlebars comparison scripts:

<script>
    Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
        switch (operator) {
            case '==':
            return (v1 == v2) ? options.fn(this) : options.inverse(this);
            case '===':
            return (v1 === v2) ? options.fn(this) : options.inverse(this);
            case '<':
            return (v1 < v2) ? options.fn(this) : options.inverse(this);
            case '<=':
            return (v1 <= v2) ? options.fn(this) : options.inverse(this);
            case '>':
            return (v1 > v2) ? options.fn(this) : options.inverse(this);
            case '>=':
            return (v1 >= v2) ? options.fn(this) : options.inverse(this);
            case '&&':
            return (v1 && v2) ? options.fn(this) : options.inverse(this);
            case '||':
            return (v1 || v2) ? options.fn(this) : options.inverse(this);
            default:
            return options.inverse(this);
        }
    });
</script>

<script>
    Handlebars.registerHelper('ifEquals', function(arg1, arg2, options) {
        return (arg1 == arg2) ? options.fn(this) : options.inverse(this);
    });
</script>

Answer 1

First your helper ifEquals accepts only 2 arguments and your are passing much more than two arguments. Actually the || operator that you use is one argument and not an operator as you can think. Try chaining your tests if you need &&/and operator and if you need a ||/or operator try duplicating the blocks.

Second if you want to pass arguments you have to use '||' or '&&' otherwise it would lookup your data and || is not a field of your data.

Third another method would be to write a Helper that would accept much more arguments you'll find how to do this in the snippet below :

 $(document).ready(function () { var context = { "regions" : [{"nominatorRegion":"BC Region"},{"nominatorRegion":"Saskatchewan Region"},{"nominatorRegion":"Alberta Region"},{"nominatorRegion":"Delaware Region"},{"nominatorRegion":"Michigan Region"}] }; Handlebars.registerHelper('ifEqualsChained', function() { var options = arguments[arguments.length-1]; // Assuming that all wanted operator are '||' valueToTest=arguments[0]; for (var i = 1; i < (arguments.length - 1); i++) { if (valueToTest === arguments[i]) { return options.fn(this); } } return options.inverse(this); }); var source = $("#sourceTemplate").html(); var template = Handlebars.compile(source); var html = template(context); $("#resultPlaceholder").html(html); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script id="sourceTemplate" type="text/x-handlebars-template"> <ul> {{#each regions}} {{#ifEqualsChained nominatorRegion "BC Region" "Saskatchewan Region" "Alberta Region"}} <li> {{nominatorRegion}} </li> {{/ifEqualsChained}} {{/each}} </ul> </script> <div id="resultPlaceholder"> </div>