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

时间:2017-09-28 21:13:44

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

我有一个表,它从DS模型中获取数据,该数据从数据库中动态更新。当表中的数据更新时,我需要在UI中更改块(特别是“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>

当值更新时,我需要块的背景颜色变化(此处为“flight”)。

1 个答案:

答案 0 :(得分:0)

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

如:

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

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

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

看看为你准备的this twiddle