template-no-action-modifiers.md

ember/template-no-action-modifiers

🔧 This rule is automatically fixable by the --fix CLI option.

HBS Only: This rule applies to classic .hbs template files only (loose mode). It is not relevant for gjs/gts files (strict mode), where these patterns cannot occur.

Disallow usage of {{action}} modifiers in templates.

The {{action}} modifier has been deprecated in favor of the {{on}} modifier. The {{on}} modifier provides a more explicit and flexible way to handle events.

Rule Details

This rule disallows using {{action}} as an element modifier.

Examples

Incorrect ❌

<button {{action 'save'}}>Save</button>

<div {{action 'onClick'}}>Click me</div>

<form {{action 'submit' on='submit'}}>Submit</form>

Correct ✅

<button {{on 'click' this.handleClick}}>Save</button>

<div {{on 'click' this.onClick}}>Click me</div>

<form {{on 'submit' this.handleSubmit}}>Submit</form>

Configuration

The following values are valid configuration:

• boolean -- true for enabled / false for disabled
• array -- an allowlist of element tag names, which will accept action modifiers

For example, to allow action modifiers only on specific elements:

module.exports = {
  rules: {
    'ember/template-no-action-modifiers': ['error', { allowlist: ['form'] }],
  },
};

Options

Name	Type	Default	Description
allowlist	string[]	[]	List of element tag names where {{action}} modifiers should be allowed

The option can be passed as an array (shorthand) or an object:

Shorthand:

{
  "ember/template-no-action-modifiers": ["error", ["button"]]
}

Object form:

{
  "ember/template-no-action-modifiers": ["error", { "allowlist": ["button"] }]
}

Related Rules

• template-no-action

References

• Ember Octane Guide - Element Modifiers
• eslint-plugin-ember template-no-action