Skip to content

template-no-passed-in-event-handlers.md

Latest commit

 

History

History
75 lines (53 loc) · 1.57 KB

template-no-passed-in-event-handlers.md

File metadata and controls

75 lines (53 loc) · 1.57 KB

ember/template-no-passed-in-event-handlers

💼 This rule is enabled in the following configs: strict-gjs, strict-gts.

Disallows passing event handlers directly as component arguments.

Instead of passing event handlers like @onClick to components, use the {{on}} modifier directly on the element. This is more explicit and follows modern Ember patterns.

Rule Details

This rule detects component arguments that follow the pattern @on[EventName] (e.g., @onClick, @onSubmit).

Examples

Examples of incorrect code for this rule:

<template>
  <MyComponent @onClick={{this.handleClick}} />
</template>
<template>
  <MyComponent @onSubmit={{this.handleSubmit}} />
</template>
<template>
  <CustomButton @onHover={{this.handleHover}} />
</template>

Examples of correct code for this rule:

<template>
  <MyComponent @action={{this.handleAction}} />
</template>
<template>
  <button {{on "click" this.handleClick}}>Click</button>
</template>
<template>
  <MyComponent @value={{this.value}} @onChange={{this.updateValue}} />
</template>

Migration

Replace:

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

With:

<MyComponent>
  <button {{on "click" this.handleClick}}>Click</button>
</MyComponent>

References