Change CSS when model changes or DOM value changes in ember

Question

I have a table and it gets the data from DS model which dynamically updates from the database. I need alert of color (css) change of the block( particular “td”) in UI when the data updates in the table.

Here is my code:

 <table class="table table-bordered table-hover">
    <thead>
           <tr>
                <th>C</th>
                <th>Flight</th>
           </tr>
    </thead>
    <tbody>
    {{#each model as |flight|}}
    <tr>
            <td>{{ember-inline-edit value=flight.ACTUAL_COMPLEX onSave = (action "updateFlight" flight.id) onClose = (action "rollbackFlight" flight.id)}}</td>
            <td>{{ember-inline-edit value=flight.FLTNUM onSave = (action "updateFlight" flight.id) onClose = (action "rollbackFlight" flight.id)}}</td>

    </tr>
    {{/each}}
    </tbody>
    </table>

I need the color change of background of the block (here “flight”) when the value updates.

poke a data attrib into the tag, then use attrib CSS selectors to activate different rules for different statuses. — dandavis, Sep 28 '17 at 21:42

score 0 · Accepted Answer · answered Sep 29 '17 at 18:27

There are many alternatives. I prefer creating my own component for td and changing its styles while its values updated.

Such as:

export default Ember.Component.extend({
  tagName:'td',
  classNameBindings:['isBlink:blink'],
  didUpdateAttrs(){
    this.set('isBlink', true);
  }
});

Note that you need to make this component to be awared of the data changes:

{{#table-cell v=flight.FLTNUM}}

Have a look at this twiddle prepared for you.

Change CSS when model changes or DOM value changes in ember

1 Answers1