Ember-组件如何仅在“点击”组件上添加边框？

Question

我想在 click 事件中突出显示 component。（需要添加一个 class 名称作为 addBorder）该怎么做？当用户点击其他组件时，我需要从其他组件中删除 addBorder。

因此只有 click 组件会立即突出显示。

我可以很容易地使用 jQuery 但我正在寻找 ember 方法！！

这是我的演示：Live Demo Link

Answer 1

您可以添加属性，例如 selectedItemTitle，它将在 click 更改为 item.title。然后你可以将这个 selectedItemTitle 传递给组件。组件可以检查其是否 item.title === selectedItemTitle。如果是，那么属性就像 isSelected 可以设置为 true。然后使用 classNameBindings.

将 isSelected 绑定到 class

父组件模板：

{{#each model as |item|}}
    {{my-child item=item.title info=item.info tagName="li" selectedItemTitle=selectedItemTitle click=(action 'selectItem' item.title)
    }}
{{/each}}

参见 working demo。

Ember-组件如何仅在“点击”组件上添加边框？

Ember-Component how to add border to only on `click` component?

ember.js