Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ember-on-modifier

Package Overview
Dependencies
Maintainers
2
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-on-modifier

{{on eventName this.someAction}} element modifier

  • 1.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
2
Created
Source

ember-on-modifier

Build Status npm version Download Total Ember Observer Score Ember Versions ember-cli Versions code style: prettier dependencies devDependencies

A polyfill for the {{on}} element modifier specified by RFC #471 "{{on}} modifier".

Installation

ember install ember-on-modifier

Compatibility

  • Completely inert when running ember-source 3.11 or higher
  • Tested against ember-source v2.13, v2.18, v3.4 in CI

Usage

<button {{on "click" this.onClick}}>
  Click me baby, one more time!
</button>
import Component from '@ember/component';
import { action } from '@ember-decorators/object';

export default class BritneySpearsComponent extends Component {
  @action
  onClick(event: MouseEvent) {
    console.log('I must confess, I still believe.');
  }
}

The @action decorator is used to bind the onClick method to the component instance.

This is essentially equivalent to:

didInsertElement() {
  super.didInsertElement();

  const button = this.element.querySelector('button');
  button.addEventListener('click', this.onClick);
}

In addition to the above {{on}} will properly tear down the event listener, when the element is removed from the DOM. It will also re-register the event listener, if any of the passed parameters change.

Listening to Multiple Events

You can use the {{on}} modifier multiple times on the same element, even for the same event.

<button
  {{on "click" this.onClick}}
  {{on "click" this.anotherOnClick}}
  {{on "mouseover" this.onMouseEnter}}
>
  Click me baby, one more time!
</button>

Event Options

All named parameters will be passed through to addEventListener as the third parameter, the options hash.

<div {{on "scroll" this.onScroll passive=true}}>
  Lorem Ipsum ...
</div>

This is essentially equivalent to:

didInsertElement() {
  super.didInsertElement();

  const div = this.element.querySelector('div');
  div.addEventListener('scroll', this.onScroll, { passive: true });
}
once

To fire an event listener only once, you can pass the once option:

<button
  {{on "click" this.clickOnlyTheFirstTime once=true}}
  {{on "click" this.clickEveryTime}}
>
  Click me baby, one more time!
</button>

clickOnlyTheFirstTime will only be fired the first time the button is clicked. clickEveryTime is fired every time the button is clicked, including the first time.

capture

To listen for an event during the capture phase already, use the capture option:

<div {{on "click" this.triggeredFirst capture=true}}>
  <button {{on "click" this.triggeredLast}}>
    Click me baby, one more time!
  </button>
</div>
passive

If true, you promise to not call event.preventDefault(). This allows the browser to optimize the processing of this event and not block the UI thread. This prevent scroll jank.

If you still call event.preventDefault(), an assertion will be raised.

<div {{on "scroll" this.trackScrollPosition passive=true}}>
  Lorem ipsum...
</div>
Internet Explorer 11 Support

Internet Explorer 11 has a buggy and incomplete implementation of addEventListener: It does not accept an options parameter and sometimes even throws a cryptic error when passing options.

This is why this addon ships a tiny ponyfill for addEventLisener that is used internally to emulate the once, capture and passive option. This means that all currently known options are polyfilled, so that you can rely on them in your logic.

Currying / Partial Application

If you want to curry the function call / partially apply arguments, you can do so using the {{fn}} helper:

{{#each this.users as |user|}}
  <button {{on "click" (fn this.deleteUser user)}}>
    Delete {{user.name}}
  </button>
{{/each}}
import Component from '@ember/component';
import { action } from '@ember-decorators/object';

interface User {
  name: string;
}

export default class UserListComponent extends Component {
  users: User[] = [{ name: 'Tom Dale' }, { name: 'Yehuda Katz' }];

  @action
  deleteUser(user: User, event: MouseEvent) {
    event.preventDefault();
    this.users.removeObject(user);
  }
}

preventDefault / stopPropagation / stopImmediatePropagation

The old {{action}} modifier used to allow easily calling event.preventDefault() like so:

<a href="/" {{action this.someAction preventDefault=true}}>Click me</a>

You also could easily call event.stopPropagation() to avoid bubbling like so:

<a href="/" {{action this.someAction bubbles=false}}>Click me</a>

You can still do this using ember-event-helpers:

<a href="/" {{on "click" (prevent-default this.someAction)}}>Click me</a>
<a href="/" {{on "click" (stop-propagation this.someAction)}}>Click me</a>
  • ember-on-helper: A complimentary {{on} template helper that accepts arbitrary event targets.

    {{on eventTarget eventName eventListener}}
    

    Also ships with two convenience helpers for adding event listeners to document and window:

    {{on-document eventName eventListener}}
    {{on-window eventName eventListener}}
    

Keywords

FAQs

Package last updated on 16 Apr 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc