no-passed-in-event-handlers.md

no-passed-in-event-handlers

It is possible to pass e.g. @click to an Ember component to override the default click event handler. For tagless components this will trigger an assertion though and can't be used as legitimate API, and for Glimmer components it will not work out of the box, like in Ember components, either.

This rule scans potential component invocations for these patterns and flags them as issues.

Examples

This rule forbids the following:

<Foo @click={{this.handleClick}} />

<Foo @keyPress={{this.handleClick}} />

{{foo click=this.handleClick}}

This rule allows the following:

<Foo @onClick={{this.handleClick}} />

<Foo @myCustomClickHandler={{this.handleClick}} />

<Foo @onKeyPress={{this.handleClick}} />

{{foo onClick=this.handleClick}}

Migration

• create explicit component APIs for these events (e.g. @click -> @onClick)

References

• https://api.emberjs.com/ember/release/classes/Component#event-handler-methods