I want to implement a custom switch case with default value with the help of the Register Helper function in HandlebarsJs.

Example:

HTML:

<div>
    {{#switch value}} 
        {{#case 'a'}} A {{/case}} 
        {{#case 'b'}} B {{/case}} 
        {{#default 'C'}} {{/default}}
    {{/switch}}
</div>

JS:(The Register Helper function should work like the below pseudo code)

switch(val) {
  case 1:
     return 'A';
     break;
  case 2:
     return 'B';
     break;
  default:
     return 'C';
}

I want to implement a custom switch case with default value with the help of the Register Helper function in HandlebarsJs.

Example:

HTML:

<div>
    {{#switch value}} 
        {{#case 'a'}} A {{/case}} 
        {{#case 'b'}} B {{/case}} 
        {{#default 'C'}} {{/default}}
    {{/switch}}
</div>

JS:(The Register Helper function should work like the below pseudo code)

switch(val) {
  case 1:
     return 'A';
     break;
  case 2:
     return 'B';
     break;
  default:
     return 'C';
}

• javascript
• handlebars.js

• Why not use a helper function? – chazsolo Commented Nov 20, 2018 at 17:33
• 1 follow this link github.com/wycats/handlebars.js/issues/927 – Sameer Commented Nov 20, 2018 at 17:38
• @SameerAhmad yes with the helps of that page and other source I have wrote an answer below. – Sankar Subburaj Commented Nov 20, 2018 at 17:46
• @chazsolo yes with the help of helper function only – Sankar Subburaj Commented Nov 20, 2018 at 17:46
• See this answer: stackoverflow.com/a/68516765/514329 – Mohsen Commented Jul 25, 2021 at 8:21

4 Answers 4

Please go through the below examples, it will guide you step by step to add the switch case with default value and break in HandlebarsJs.

Use the link http://tryhandlebarsjs.com/ to test the code. (Give {} for Context)

Switch case

Handlebars Template:

<div>

        {{#switch 'a'}} 
            {{#case 'a'}} A {{/case}} 
            {{#case 'b'}} B {{/case}} 
        {{/switch}}

</div>

Register Helper functions:

Handlebars.registerHelper('switch', function(value, options) {
  this.switch_value = value;
  return options.fn(this);
});

Handlebars.registerHelper('case', function(value, options) {
  if (value == this.switch_value) {
    return options.fn(this);
  }
});

==========================================================================

Switch case with default:

Handlebars Template:

<div>

        {{#switch 'a'}} 
            {{#case 'a'}} A {{/case}} 
            {{#case 'b'}} B {{/case}}
            {{#default '188'}} {{/default}}
        {{/switch}}

</div>

Register Helper functions:

Handlebars.registerHelper('switch', function(value, options) {
  this.switch_value = value;
  return options.fn(this);
});

Handlebars.registerHelper('case', function(value, options) {
  if (value == this.switch_value) {
    return options.fn(this);
  }
});

Handlebars.registerHelper('default', function(value, options) {
    return true; ///We can add condition if needs
});

==========================================================================

Switch case with default and break

Handlebars Template:

<div>
        {{#switch 'a'}} 
            {{#case 'a'}} A {{/case}} 
            {{#case 'b'}} B {{/case}} 
            {{#default '188'}} {{/default}}
        {{/switch}}
</div>

Register Helper functions:

Handlebars.registerHelper('switch', function(value, options) {
  this.switch_value = value;
  this.switch_break = false;
  return options.fn(this);
});

Handlebars.registerHelper('case', function(value, options) {
  if (value == this.switch_value) {
    this.switch_break = true;
    return options.fn(this);
  }
});

Handlebars.registerHelper('default', function(value, options) {
   if (this.switch_break == false) {
     return value;
   }
});

If all you need is an if-else if-else structure, consider to use the built-in if/else helpers (see Helpers: Conditionals on "chained" conditionals) and define only the comparison operation in your own helper.

Helper

Handlebars.registerHelper('isEqual', (value1, value2, options) => {
  return value1 === value2;
});

Template

<div>
    {{#if (isEqual value 'a')}} 
        A
    {{else if (isEqual value 'b')}}
        B
    {{else}}
        C
    {{/if}}
</div>

Initially answered here.

I want to use #switch with #case and #default without setting a value for #default so I customize a popular answer.

Switch case with default and break (via case -> default)

Handlebars Template:

<div>
        {{#switch myvar}} 
            {{#case 'a'}} A {{/case}} 
            {{#case 'b'}} B {{/case}}
            {{#case 'default'}} Default output {{/case}}
        {{/switch}}

</div>

Register Helper functions:

Handlebars.registerHelper('switch', function(value, options) {
  this.switch_value = value;
  this.switch_break = false;
  return options.fn(this);
});

Handlebars.registerHelper('case', function(value, options) {
  if (value == this.switch_value || (value == 'default' && this.switch_break == false)) {
     this.switch_break = true;
     return options.fn(this);
  }
});

In this solution you have to use {{#case 'default'}} instead of {{#default '12345'}} and the helper prints the content of #case, just like the others.

One helper less and a little more complexity in #case helper.

This works very fine for me.

Pay attention: put {{#case 'default'}} at the end of switch, and obviously the value 'default' cannot be in range of myvar.

Just if you want to convert key to value.

module.exports = function(input, cases, values) {
  const caseArray = cases.split(',')
  const valueArray = values.split(',')
  const defaultValue = caseArray.length < valueArray.length ? valueArray[valueArray.length-1] : "";

  return caseArray.indexOf(input) > -1? valueArray[caseArray.indexOf(input)] : defaultValue 
};

{{switch "Y" "Y,N,D", "YES,NO,DELETED,-"}}  // YES
{{switch "Hi" "Y,N,D", "YES,NO,DELETED,-"}}  // -