Ember-Component如何仅在“click”组件上添加边框？ [英] Ember-Component how to add border to only on `click` component?

问题描述

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

I would like to highlight the component on click event.( need to add a class name as addBorder) how to do that? while user clicks on other component, I would require to remove addBorder from other components.

所以只有 click componentset将被突出显示。

so only the click componet will be highlighted at once.

我可以使用 jQuery 非常容易，但我正在寻找 ember 方式!!

I can do using jQuery very easily but I am looking for ember way!!

这是我的演示：现场演示链接

推荐答案

您可以添加类似 selectedItemTitle 的属性，将在点击到 item.title 。然后，您可以将 selectedItemTitle 传递给组件。组件可以检查它的 item.title === selectedItemTitle 。如果是，则可以将如 isSelected 等属性设置为true。然后，使用 classNameBindings 将 isSelected 绑定到一个类。

You can add property like selectedItemTitle which will be changed on click to item.title. Then you can pass this selectedItemTitle down to components. Component can check if its item.title === selectedItemTitle. If yes then property like isSelected can be set to true. Then you bind isSelected to a class using classNameBindings.

父组件模板：

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

请参阅工作演示。

这篇关于Ember-Component如何仅在“click”组件上添加边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！