当模型更改时更改 CSS 或 ember 中的 DOM 值更改

Question

我有一个 table，它从动态更新数据库的 DS 模型中获取数据。当 table.

中的数据更新时，我需要在 UI 中提醒颜色 (css) 块（特别是“td”）的变化

这是我的代码：

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

我需要值更新时块（这里是“航班”）背景的颜色变化。

Answer 1

有很多选择。我更喜欢为 td 创建自己的组件并在其值更新时更改其样式。

如：

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

请注意，您需要让此组件了解数据更改：

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

看看this twiddle为你准备的

当模型更改时更改 CSS 或 ember 中的 DOM 值更改

Change CSS when model changes or DOM value changes in ember

javascript

jquery

ember.js

ember-data

ember-observable