Skip to content

template-no-inline-event-handlers.md

Latest commit

 

History

History
72 lines (51 loc) · 1.41 KB

template-no-inline-event-handlers.md

File metadata and controls

72 lines (51 loc) · 1.41 KB

ember/template-no-inline-event-handlers

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