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

Question

我有一个组件列表（都是相同的）

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

我想在点击的元素上添加一个类，并且，当点击一个新元素时，旧元素应该变为＆＃34; unlicked＆＃34; （又名，删除课程）。

获得此结果的最佳方式是什么？

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'));
}