ember-functions-as-modifiers-polyfill

Use plain functions as modifiers. Polyfill for RFC: 757 | Default Modifier Manager

Compatibility

• Ember.js v3.25 or above
• Ember CLI v3.25 or above
• Node.js v14 or above
• ember-auto-import v1 or above
• embroider-optimized

Installation

ember install ember-functions-as-modifiers-polyfill

Usage

Define a function (doesn't have to be in a component)

import Component  from '@glimmer/component';

export default class MyComponent extends Component {
  myModifier = (element, x) => {
    let handler = () => console.log(x); // -> 3

    element.addEventListener('click', handler);

    return () => element.removeEventListener('click', handler);
  }
}

<div {{this.myModifier 3}}>

Named arguments will all be grouped together in the last argument of the helper:

import Component  from '@glimmer/component';

export default class MyComponent extends Component {
  doStuff = (element, x, options) => {
    let handler = () => console.log(x, options.optionA, options.optionB); // -> 3 2 3

    element.addEventListener('click', handler);

    return () => element.removeEventListener('click', handler);
  };
}

<div {{this.doStuff 3 optionA=2 optionB=3}}>

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.