Change CSS when model changes

Ember Data
1

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:

{{#each model as |flight|}} {{/each}}
C Flight
{{ember-inline-edit value=flight.ACTUAL_COMPLEX onSave = (action "updateFlight" flight.id) onClose = (action "rollbackFlight" flight.id)}} {{ember-inline-edit value=flight.FLTNUM onSave = (action "updateFlight" flight.id) onClose = (action "rollbackFlight" flight.id)}}

I need the color of the block “flight” change when the value updates.

2

We use an “if” helper to add a class name, such as “red” or “alert” or whatever, to the class attribute. I like the add-on “ember-truth-helpers” for this kind of stuff. I’m on my phone, else I’d tap out an example using your code above, but I can’t see it and type this.

3

@Chris_Lincoln Thanks for the answer. Can you be more specific as I am pretty new to EmberJS. I have gone through the add-on you specified but I cannot compare the old and new value within if helper. Please let me know if there is a way to accomplish that. Thank You

4

sure, no problem. Let’s table the specifics of how to change the CSS selection and focus more on knowing when to do so. What exactly do you mean by “when the value updates”? I kind of get the gist of what you are doing, but could use some clarity. What does your flight model have exposed so that if you had to write pseudocode, what would the code look like? We might be writing a computed for the truth helper.

5 
<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>

when ever i got the dynamic update from database to model( flight ) it updates the values in UI flight number “flight.FLTNUM” and complex “flight.ACTUAL_COMPLEX”. I can edit those values in my UI for that I used “embe-inline-edit”. I need the color change of the particular ember-inline-edit block of the updated value.