如何将类添加到所选组件？

Question

我有一个组件列表(都是一样的)

<ul class="search-results">
  {{#each res as |item|}}
    {{search-result item=item}}
  {{/each}}
</ul>

我想在单击的元素上添加一个类,并且,当单击一个新元素时,旧元素应该变为"未单击"(也就是说,删除该类).

获得此结果的最佳方法是哪种？

Answer 1

添加activeItem到控制器(包装器组件)并将其发送到所有search-result组件.通过发送操作激活项目activate.

// template
<ul class="search-results">
  {{#each res as |item|}}
    {{search-result item=item activeItem=activeItem activate="activate"}}
  {{/each}}
</ul>

// controller (wrapper component)
activeItem: null,
actions: {
  activate(item) {
    this.set('activeItem', item);
  }
}

// search-result component
activeItem: null,
isActive: Ember.computed('item', 'activeItem', function() {
  return (this.get('item') === this.get('activeItem'));
}),
click() {
  this.sendAction('activate', this.get('item'));
}