Meteor：如何使用Spacebars应用不同的CSS元素？

Question

我想用不同的颜色作为我卡片的标题。 我以为我可以使用Spacebars unique {{if for it但它似乎只适用于布尔变量，而不是检查字符串的条件：

这是我的代码：

{{#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}}

我想使用teal-header的CSS元素作为type==='ToDo'的条件， orange-header用于type==='Info' and的条件，粉色标题for every other value of 。

我怎样才能实现这个目标，或者在Meteor中不可能做到这一点？

Answer 1

你只需要一个帮助器来返回适当的类：

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>

请注意，您也可以使用带有等号帮助器的Spacebars子表达式 ，如下所示，但我不认为这种情况有多种可能性：

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

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

尽管如此，拥有一般的平等帮助者通常非常有用。

Answer 2

您可以实现一个帮助程序并将其放在“class”属性中

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

在您的模板的JavaScript中，类似于

Template.myTemplate.helpers({
  getColorByType(){
    var type = ... // get your type from the template instance

    if (type === 'ToDo'){
       return 'teal';
    } else if (type === 'Info'){
       return 'orange';
    }
    return 'teal';
  }
}

Answer 3

根据@richsilv和@ mati-o的答案，我使用了两个人建议的模板助手。 但我选择了我个人认为更容易阅读的代码（这也让我可以选择获得更多不同的颜色）：

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

在html代码中使用这个帮助器是相同的，但为了完整性，这里也是那段代码：

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

再次感谢两位帮助我！