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

Question

I'd like to use a different color for the header of my card. I thought that I could use Spacebars unique {{if condition for it but it seems it only works with boolean variables and not with a condition that is checking for a string:

Here's my code:

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

I'd like to use the CSS element of teal-header for the condition that type==='ToDo' , orange-header for the condition that type==='Info' and pink-header for every other value of type`.

How can I achieve this or is it not possible to do within Meteor?

Answer 1

You just need a helper to return the appropriate class:

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

Then in your template:

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

Note that you can also use Spacebars subexpressions with an equals helper like below, but I don't think that's the right option for this situation where there are multiple possibilities:

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

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

Having a general equal helpers is often very useful anyway though.

Answer 2

You can implement a helper and put it inside the 'class' attribute

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

And in your template's javascript, something like

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

Based on the answers by @richsilv and @mati-o I've used template helpers as suggested by both of them. But I selected for what I personally think is an easier to read code (which gives me also the option to get even more different colors in):

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

The use of this helper in the html code is the same but for completeness here's also that piece of code:

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

Thanks again to both for helping me out!