Modifier le CSS lorsque le modèle change ou que la valeur du DOM change dans le brai

Question

J'ai une table qui récupère les données du modèle DS qui sont mises à jour dynamiquement à partir de la base de données. J'ai besoin de l'alerte de changement de couleur (css) du bloc (en particulier "td") dans l'interface utilisateur lorsque les données mises à jour dans la table.

Voici mon 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> 

J'ai besoin du changement de couleur de fond du bloc (ici « vol ») lorsque les mises à jour de valeur.

Answer 1

Il existe plusieurs alternatives. Je préfère créer mon propre composant pour td et changer ses styles pendant que ses valeurs sont mises à jour.

Tels que:

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

Notez que vous devez faire ce composant à awared des changements de données:

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

Jetez un oeil à this twiddle préparé pour vous.