How can I check multiple conditions in a Handlebars template?

Question

I have a handelbars page where depending on the title item in json it'll show different content.

so far this is built using helper if_wq

for example if title = test this works

I would like a way to extend this functionality to show if title = test and colors.href = /test

so the condition is only valid if both conditions are true.

example of my code

 {{#if_eq title 'test'}}
        True
    {{/if_eq}}

Example of my helper task

handlebars.Handlebars.registerHelper('if_eq', function(a, b, opts) {
    if (a === b) {
        return opts.fn(this);
    } else {
        return opts.inverse(this);
    }
});

example of my json

"range-list-page": {     
  "ranges": [            
    {                    
    "title": "test",  
  "colors": [                                               
    {                                                       
      "color": "#fff",                                      
      "label": "White",                                     
      "bordered": true,                                     
      "href" : "/test"      
    },                                                      
    {                                                       
      "color": "#F3DCAE",                                   
      "label": "Cream",                                     
      "href" : "http://google.com"                          
    },                                                      
    {                                                       
      "color": "#C5B7B0",                                   
      "label": "Cashmere",                                  
      "href" : "http://google.com"                          
    },                                                      
    {                                                       
      "color": "#D0B193",                                   
      "label": "Larch",                                     
      "href" : "http://google.com"                          
    }                                                       
  ]

Possible duplicate of [Handlebars: multiple conditions IF statement?](https://stackoverflow.com/questions/41251635/handlebars-multiple-conditions-if-statement) — StudioTime, Jul 10 '18 at 16:26

score 2 · Accepted Answer · answered Jul 10 '18 at 16:31

2

I have the following helper methods that I define:

(1) eq - you already have that,

Handlebars.registerHelper('eq', function(a, b) {
    if(a == b) // Or === depending on your needs
        return true;
    else
        return false;
});

(2) and - See important note below.

Handlebars.registerHelper('and', function () {
    // Get function args and remove last one (meta object); every(Boolean) checks AND
    return Array.prototype.slice.call(arguments, 0, arguments.length - 1).every(Boolean);
});

NOTE: As you can see, I have to remove the last arg from arguments before doing Array.prototype.slice.call because the last arg returned here is a meta object. If you don't trim the last result of arguments then every(Boolean) will give wrong results. Otherwise it's just an every(Boolean).

(3) Now, assuming we have these 2 helpers, the following example works to check AND/EQ:

{{#if (and (eq var1 'STRING1') (eq var2 'STRING2') ) }}
...
{{/if}}

answered Jul 10 '18 at 16:31

gene b.

10,512
21
115
227

hmm seem to get error TypeError in plugin 'gulp-compile-handlebars' Message: ((helpers.title || (depth0 && depth0.title)) || alias2).call is not a function – Beep Jul 11 '18 at 08:57
Strange, does Gulp somehow change this suggestion? Are you using a specific version of Handlebars? Mine is this: `Handlebars v4.0.11` `handlebars.min.js`. I am not using Gulp. – gene b. Jul 11 '18 at 15:57
good point, ill check and accept the answer if its a problem like that, thanks – Beep Jul 11 '18 at 16:18
1

One more thing, check how you're calling the `{{#if}...`, check all parentheses. Note the order and how different clauses are grouped above. – gene b. Jul 11 '18 at 16:42

How can I check multiple conditions in a Handlebars template?

1 Answers1