Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
ember-on-modifier
Advanced tools
A polyfill for the {{on}}
element modifier specified by
RFC #471 "{{on}}
modifier".
ember install ember-on-modifier
ember-source
3.11 or higherember-source
v2.13, v2.18, v3.4 in CI<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.
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>
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 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.
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}}
FAQs
{{on eventName this.someAction}} element modifier
The npm package ember-on-modifier receives a total of 3,017 weekly downloads. As such, ember-on-modifier popularity was classified as popular.
We found that ember-on-modifier demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
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.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.