Question

随着Ember 2.0进入管道并逐渐远离itemControllers＆amp;视图，将所选类应用于当前选定的tr元素的最佳方法是什么？

最初只有控制器模板中的每个循环在每个tr元素上设置itemControllers。然后，itemController将保留isSelected属性，并在选择时将其提升到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元素上的类

1 个答案: