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

Question

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.

Vignesh Raja · Accepted Answer · 2019-01-29 06:17:48Z

1

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.

answered Jan 29, 2019 at 6:17

Vignesh Raja

8,9112 gold badges38 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kareem Phillip-Jackson Over a year ago

Hi, thank you for your answer. My understanding is this works if you value is true or false but what if the value in the database is specific, how would you go about something like that?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related