ember.js - 如何向选定的组件添加类？

Question

我有一个组件列表(全部相同)

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

我想在单击的元素上添加一个类，并且当单击新元素时，旧元素应该变为“未单击”(也称为删除该类)。

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

Answer 1

将activeItem添加到 Controller (包装组件)并将其发送到所有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'));
}