更改模型更改或在餘燼中的DOM值更改時的CSS

我有一個表，它從DS模型獲取數據，從數據庫動態更新。當表中的數據更新時，我需要在UI中更新塊（特別是「td」）的顏色（css）更改。更改模型更改或在餘燼中的DOM值更改時的CSS

這裏是我的代碼：

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

我需要的塊（這裏「飛」）的值更新時的背景顏色變化。

來源

2017-09-28 vamshi karru

將數據attrib戳入標籤，然後使用attrib CSS選擇器爲不同的狀態激活不同的規則。 – dandavis

有很多選擇。我更喜歡爲td創建我自己的組件，並在更新其值時更改其樣式。

如：

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

請注意，你需要這個組件被awared的數據變化：

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

看一看this twiddle爲您準備的。

來源

2017-09-29 18:27:38 ykaragol

更改模型更改或在餘燼中的DOM值更改時的CSS

回答

相關問題