Как написать условное CSS в ember для атрибутов класса? - PullRequest
Новая
       20

Как написать условное CSS в ember для атрибутов класса?

0 голосов
/ 29 января 2019

я застрял в проблеме и не смог найти ресурс, который объясняет это.Извините, если это очевидно, но я начинающий новичок.

Я хочу написать условное выражение для таблицы.

Пример: 

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

Я пытался с помощью следующего кода: 

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

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 29 января 2019

Чтобы переключить класс, используйте if руль. Документы для справки

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

См., Например, Ember Twiddle .

...