在 handlebars.js 中默认切换大小写

Question

我想借助 HandlebarsJs 中的 Register Helper 函数实现具有 default 值的自定义 switch case。

示例：

HTML:

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

JS:（Register Helper 函数应该像下面的伪代码一样工作）

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

Answer 1

请通过下面的示例，它将指导您逐步在 HandlebarsJs 中添加具有默认值的 switch case 和 break。

使用link 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
});

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

使用默认值和 break 切换大小写

把手模板：

<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;
   }
});

Answer 2

如果你想将键转换为值。

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,-"}}  // -

Answer 3

如果您只需要 if-else if-else 结构，请考虑使用内置的 if/else 帮助程序（请参阅 Helpers: Conditionals 关于“链式”条件）并在您自己的助手中仅定义比较操作。

帮手

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>

最初回答here。

在 handlebars.js 中默认切换大小写

Switch case with default in handlebars.js

javascript

handlebars.js

开关盒

默认切换大小写：

使用默认值和 break 切换大小写

帮手

模板