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


Tags: javascript,css,meteor,spacebars

Problem :

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' andpink-headerfor every other value oftype`.

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



Solution :

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.


    CSS Howto..

    How to add scroll to child of flex item?

    How to create an ActionImage from a CSS Sprite

    How to have JavaScript read a value appended with CSS at a given ID

    how to make a double hover effect with css

    How to overlap a div to an another div without changing their positions - Css

    How should I start to learn JavaScript, jQuery, etc.? My programming knowledge is zero [closed]

    Table cells without borders having white lines - how do I disable them?

    How can menu items be displayed from bottom up using CSS

    how to interactively toggle CSS sheets(s) on a webpage for testing/learning purposes?

    How to make a CSS mega menu be on the full width of the page? (998px, but in the middle?)

    How to scroll LI items in a fixed height UL?

    How can I give a javascript element a CSS class?

    How to use CSS import in Liferay? CSS fast load works bad

    How to show one element when click on the another element with css?

    How can i create a hexagon shape with an image inside? [duplicate]

    How to hide text without ID?

    CSS Flex Box: How to vertically align “flex items” to middle without losing flex item height?

    CSS - how to hide the top of a container using CSS-height, vertical-align and overflow?

    How to apply rounded borders to highlight/selection

    How to turn a CSS class on and off by clicking a button

    How do I create a clickable button or link inside an tag and still be right-clickable?

    CSS Menu - how to [closed]

    How to add html code into html?

    How to style this value with jQuery

    How to control tr height of table in CSS

    In CSS/JS, how to word-wrap at every nth word?

    How to add dynamic CSS style sheet for single xhtml file

    CSS How to center a div horizontally

    Element width based on how many siblings are present

    Only Lower Half Of The Border Is Shown