Как получить исходный объект события в обработчике действия?
Я хотел бы уточнить, как получить исходный объект события в обработчике действий.
документация говорит:
To utilize an
eventobject as a function parameter:
- Define the event handler in the component (which is designed to receive the browser event object).
- Or, assign an action to an inline event handler in the template (which creates a closure action and does receive the event object as an argument).
Итак, чтобы получить объект события во встроенном обработчике, мы делаем так:
hbs:
<form onsubmit = {{action "submit"}}>
js:
actions: {
submit(e) {
console.info(e); // original event
}
}
А как насчет первого варианта определения обработчика событий в компоненте?
@Lux Вы можете объяснить, о чем конкретно идет речь в первом варианте? В документации отсутствуют примеры этих двух пунктов. И почему его нельзя использовать?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
event handler in the component означает функцию компонента, которая называется именем события. Его буквально первый пример здесь. И как говорится в документации:
Simply implement the name of the event you want to respond to as a method on your component.
Итак, когда вы вызываете свой компонент следующим образом:
{{#double-clickable}}
This is a double clickable area!
{{/double-clickable}}
и это код js для компонента:
import Component from '@ember/component';
export default Component.extend({
doubleClick(e) {
alert('DoubleClickableComponent was clicked!');
console.info('and this is the event', e);
}
});
тогда функция doubleClick получает событие, когда событие запускается на соответствующем теге.
Однако соответствующие теги для компонентов со временем исчезнут. Взгляните на Вызов угловой скобки RFC и Только шаблон Компоненты RFC. Эта концепция уже полностью удалена из компонентов мерцать.
Вы по-прежнему используете его может, и, возможно, бывают редкие варианты использования, когда вы все еще используете имеют, но действия по закрытию - это определенно лучший способ, когда это возможно!
Итак, когда у вас есть этот шаблон:
<button onclick = {{action 'myAction' 10}}>Click me</button>
и соответствующий component.js:
actions: {
myAction(n, e) {
console.info(n); // the number 10
console.info(e); // event
}
}
Также следует отметить, что Методы обработчика событий в компонентах обычно получают в качестве аргумента экземпляр jquery.Event..
В упомянутом RFC подробно объясняется, как это изменится с удалением jQuery.
Не делайте первый вариант, и ваш пример верен