在 tr 上操作后更改 tr 元素上的 class

Question

随着 Ember 2.0 即将推出并远离 itemControllers 和视图，将 selected class 应用到当前 selected tr 元素?

最初只有控制器模板中的每个循环在每个 tr 元素上设置 itemControllers。然后 itemController 将保持 isSelected 属性并在 select.

时将其提升到 parentController 中

当前选择正常工作，pumpSelected 与传递到组件的属性的绑定没有问题。

虽然重构后代码更清晰了一些，但它只是将对 itemController 的需求推向了我。任何帮助表示赞赏。

组件 .hbs 片段：

{{#each pump in results}}
  <tr {{action 'select' pump}} {{bind-attr class='isSelected:selected'}}>
    <td>{{pump.modelNumber}}</td>
  </tr>
{{/each}}

组件定义：

PumpResultComponent = Ember.Component.extend
  tagName: 'table'
  classNames: ['table', 'table-striped']

  actions:
    select: (selectedPump)->
      @set 'pumpSelected', selectedPump

Answer 1

我现在这样做的方式是将内容包装在列表中并在每个项目中定义选定状态。在您的模板中，您可以遍历此包装器列表，因此在您的情况下：

PumpResultComponent = Ember.Component.extend({
    pumpList: function() {
        var selected = this.get('pumpSelected');
        return this.get('results').map(function(pump) {
            return {
                isSelected: selected && pump.get('id') === selected.get('id'), // or some other equality property 
                pump: pump
            };
        });
    }.property('pumpSelected','results')
});

{{#each item in pumpList}}
    <tr {{action 'select' item.pump}} {{bind-attr class='item.isSelected:selected'}}>
        <td>{{item.pump.modelNumber}}</td>
    </tr>
{{/each}}

在 tr 上操作后更改 tr 元素上的 class

Change class on tr element after action on tr

ember.js