ember 中模型更改或 DOM 值更改时更改 CSS答案

【问题标题】：Change CSS when model changes or DOM value changes in emberember 中模型更改或 DOM 值更改时更改 CSS
【发布时间】：2017-09-28 21:13:43
【问题描述】：

我有一个表，它从 DS 模型中获取数据，该模型从数据库中动态更新。当表格中的数据更新时，我需要提醒用户界面中块（特别是“td”）的颜色（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>

当值更新时，我需要块背景的颜色变化（这里是“飞行”）。

【问题讨论】：

在标签中插入一个数据属性，然后使用属性 CSS 选择器为不同的状态激活不同的规则。

标签： javascript jquery ember.js ember-data ember-observable

【解决方案1】：

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

如：

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

注意，你需要让这个组件知道数据的变化：

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

看看为你准备的this twiddle。

【讨论】：