[英]Switch case with default in handlebars.js
我想借助 HandlebarsJs 中的 Register Helper function 实现具有default
值的自定义switch
case
。
例子:
HTML:
<div>
{{#switch value}}
{{#case 'a'}} A {{/case}}
{{#case 'b'}} B {{/case}}
{{#default 'C'}} {{/default}}
{{/switch}}
</div>
记者: (注册助手 function 应该像下面的伪代码一样工作)
switch(val) {
case 1:
return 'A';
break;
case 2:
return 'B';
break;
default:
return 'C';
}
请仔细阅读以下示例,它将逐步指导您在 HandlebarsJs 中添加具有默认值的 switch case 和 break。
使用链接http://tryhandlebarsjs.com/测试代码。 (为上下文提供{}
)
车把模板:
<div>
{{#switch 'a'}}
{{#case 'a'}} A {{/case}}
{{#case 'b'}} B {{/case}}
{{/switch}}
</div>
注册助手功能:
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);
}
});
================================================== ========================
车把模板:
<div>
{{#switch 'a'}}
{{#case 'a'}} A {{/case}}
{{#case 'b'}} B {{/case}}
{{#default '188'}} {{/default}}
{{/switch}}
</div>
注册助手功能:
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
});
================================================== ========================
车把模板:
<div>
{{#switch 'a'}}
{{#case 'a'}} A {{/case}}
{{#case 'b'}} B {{/case}}
{{#default '188'}} {{/default}}
{{/switch}}
</div>
注册助手功能:
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;
}
});
我想在不为#default 设置值的情况下将#switch 与#case 和#default 一起使用,因此我自定义了一个流行的答案。
使用默认和中断切换大小写(通过大小写->默认)
车把模板:
<div>
{{#switch myvar}}
{{#case 'a'}} A {{/case}}
{{#case 'b'}} B {{/case}}
{{#case 'default'}} Default output {{/case}}
{{/switch}}
</div>
注册助手功能:
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);
}
});
在此解决方案中,您必须使用{{#case 'default'} } 而不是 {{#default '12345'}}并且 helper 打印 #case 的内容,就像其他人一样。
#case helper 中少了一个 helper 并且复杂了一点。
这对我来说很好用。
注意:把{{#case 'default'}}放在switch的末尾,显然'default'的值不能在myvar的范围内。
就像您想将键转换为值一样。
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,-"}} // -
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.