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';
}
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)
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);
}
});
==========================================================================
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
});
==========================================================================
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;
}
});
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,-"}} // -
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.
Handlebars.registerHelper('isEqual', (value1, value2, options) => {
return value1 === value2;
});
<div>
{{#if (isEqual value 'a')}}
A
{{else if (isEqual value 'b')}}
B
{{else}}
C
{{/if}}
</div>
Initially answered here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.