流星:如何使用空格键来应用不同的CSS元素

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

本文关键字：CSS 元素 应用 何使用 空格键 流星      更新时间：2023-09-26

我想为我的卡片标题使用不同的颜色。我以为我可以使用它Spacebars独特的{{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粉红色标头for every other value of类型的条件。

我怎样才能做到这一点，还是不可能在流星中做到这一点？

你只需要一个帮助程序来返回相应的类：

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>

请注意，您也可以将空格键子表达式与下面这样的等号助手一起使用，但我认为对于存在多种可能性的情况，这不是正确的选择：

Template.registerHelper('equal', (x, y) => x === y)
<div class="paper-card-header {{#if (equal type "Info")}}orange-header{{/if}}"></div>

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

你可以实现一个帮助程序并将其放在"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';
  }
}

根据 @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}}">

再次感谢两位帮助我！

相关文章：