`Modifier`

Attaches imperative behavior to a DOM element from a template.

Since Ember 4/5 (Octane) Spec ↗

Syntax

modifier((element, positional, named) => cleanup?)

Returns

Modifier — An element modifier.

Examples

import { modifier } from 'ember-modifier';

export default modifier((element, [handler]) => {
  const onScroll = () => handler(element.scrollTop);
  element.addEventListener('scroll', onScroll);
  return () => element.removeEventListener('scroll', onScroll);
});

{{! usage }}
<div {{track-scroll this.onScroll}}>...</div>

Notes

Use modifiers for direct DOM interaction (focus, measurements, third party libraries). Return a teardown function for cleanup. The built-in {{on}} and {{did-insert}}-style needs are covered by ember-modifier.