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

Question

我想为我的卡片 header 使用不同的颜色。我以为我可以使用 Spacebars 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}}

我想使用 teal-header 的 CSS 元素作为 type==='ToDo' 的条件，orange-header 用于 type==='Info' and[= 的条件27=]for every other value of类型`.

我怎样才能做到这一点，或者在 Meteor 中不可能做到这一点？

Answer 1

您可以实现一个助手并将其放在 '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 2

你只需要一个帮手 return 合适的 class:

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 subexpressions 与下面的 equals 助手一起使用，但我认为这不是这种情况的正确选择，因为有多个可能性：

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

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

无论如何，拥有一个通用的 equal 助手通常非常有用。

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

再次感谢两位对我的帮助！

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

Meteor: How can I use Spacebars to apply different CSS elements?

javascript

css

meteor

spacebars