Skip to content

template-no-inline-event-handlers.md

Latest commit

 

History

History
74 lines (52 loc) · 1.55 KB

template-no-inline-event-handlers.md

File metadata and controls

74 lines (52 loc) · 1.55 KB

ember/template-no-inline-event-handlers

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

Disallows DOM event handler attributes in templates.

Inline event handlers like onclick="..." are an older pattern that should be replaced with the {{on}} modifier for better Ember integration and testability.

Rule Details

This rule disallows the use of inline DOM event handler attributes like onclick, onsubmit, etc.

Examples

Examples of incorrect code for this rule:

<template>
  <button onclick="alert('test')">Click</button>
</template>
<template>
  <div onmousedown="handleEvent()">Content</div>
</template>
<template>
  <form onsubmit="return false;">Form</form>
</template>

Examples of correct code for this rule:

<template>
  <button {{on "click" this.handleClick}}>Click</button>
</template>
<template>
  <input {{on "input" this.handleInput}} />
</template>
<template>
  <form {{on "submit" this.handleSubmit}}>Form</form>
</template>

Migration

Replace:

<button onclick="alert('clicked')">

With:

<button {{on "click" this.handleClick}}>

References