CODEWITHSUNDEEP
javascriptember.jsember-cli
Kareem Phillip-Jackson
Kareem Phillip-Jackson

Reputation: 91

How to write a CSS Conditional in ember for class attributes?

am stuck on a problem and haven't been able to find a resource that explains this. Sorry if this is obvious but I am an ember newbie.

I want to be able to write an if equals conditional for a table.

Example:

if (data === 'r') {
     change table row to red
else 
    change table row to blue
}

I've been trying by using the following code:

<table class="attr1 {{#if (eq data 'r')}} red {{else}} blue {{/if}}">
</table>

Any help is appreciated.

Upvotes: 2

Views: 862

Answers (1)

Vignesh Raja
Vignesh Raja

Reputation: 8751

To switch the class, use if handlebars. Docs for Reference

{{if <property> <if true, inserts class1> <if false, inserts class2}}

application.hbs

<table class='{{if usered "red" "blue"}}'>
    <tr><td>A</td></tr>
    <tr><td>B</td></tr>
    <tr><td>C</td></tr>
</table>

application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  usered: false,
  actions:{
        changeColor : function(){
            this.toggleProperty("usered");
      }
  }
});

app.css

.red
{
  color:red;
}
.blue
{
  color: blue;
}

table, tr, td
{
  border:1px solid black;
}

Refer this Ember Twiddle for example.

Upvotes: 1

Related Questions