Javascript Meteor:如何使用空格键应用不同的CSS元素？

我想用不同的颜色作为我的卡头。我想我可以使用

空格键

unique

{{if

条件来实现它，但它似乎只适用于布尔变量，而不适用于检查字符串的条件：

这是我的密码：

{{#if type='ToDo'}}
    <div class="paper-card-header teal-header">
{{else}}
        {{#if type='Info'}}
            <div class="paper-card-header orange-header">
        {{else}}
            <div class="paper-card-header pink-header">
        {{/if}}
{{/if}}

{{#if type='ToDo'}
{{else}
{{#如果type='Info'}
{{else}
{{/if}
{{/if}

我想使用

teal header

的CSS元素来表示

type=='ToDo'

的条件，使用

orange header

的CSS元素来表示

type===='Info'的条件，使用
pink header
来表示
type`的每一个其他值

我如何实现这一点，或者在Meteor中不可能实现这一点？
您可以实现一个helper并将其放入“class”属性中

<div class="paper-card-header {{getColorByType}}-header">

您只需要一个助手来返回相应的类：

Template.YOURTEMPLATE.helpers({
  headerClass: function () {
    var class = {
      'ToDo': 'teal-header',
      'Info': 'orange-header'
    }[this.type]
    return class || 'pink-header'
  }
})

然后在模板中：

<div class="paper-card-header {{headerClass}}"></div>



请注意，您也可以使用下面这样的equals帮助器，但我认为对于存在多种可能性的情况，这不是正确的选择：

Template.registerHelper('equal', (x, y) => x === y)

<div class="paper-card-header {{#if (equal type "Info")}}orange-header{{/if}}"></div>

Template.registerHelper（'equal'，（x，y）=>x==y）

不过，拥有一个通用的平等助手通常是非常有用的。
根据@richsilv和@mati-o的回答，我使用了他们两人建议的模板助手。但我选择了我个人认为更容易阅读的代码（这也让我可以选择使用更多不同的颜色）：

在html代码中使用此帮助程序是相同的，但为了完整起见，这里还有一段代码：

<div class="paper-card-header {{headerColor}}">



再次感谢两位帮助我走出困境

Template.puzzle.helpers({
    headerColor: function () {
        switch (this.type) {
            case "ToDo":
                return 'md-orange-header';
            break;
            case "Info":
                return 'md-green-header';
            break;
            case "NewTG":
                return 'md-teal-header';
            break;
            default:
                return 'md-green-footer';
        }
    }
});

<div class="paper-card-header {{headerColor}}">