Как правильно обрабатывать события нажатия клавиш в Ember js 3.13 - PullRequest
Новая
       41

Как правильно обрабатывать события нажатия клавиш в Ember js 3.13

1 голос
/ 20 октября 2019

Я новичок в Ember и хочу поймать событие глобального нажатия клавиши и обработать его в моем компоненте.

После большого количества сканирований в Интернете я сделал это по старинке с глобальным window.onkeydown = this.handleKeyPress, и с помощью функции handleKeyPress я сделал некоторый код и вызвал this.movePlayerInDirection, но теперь мое "this" - это окно. 

onKeyPress(e, comp) {
    let keyCode = e.keyCode;`

    if (keyCode === KEY_LEFT ||
        keyCode === KEY_UP ||
        keyCode === KEY_RIGHT ||
        keyCode === KEY_DOWN) {
        let direction;

        switch(e.keyCode) {
            case KEY_LEFT:
                direction = {x: -1, y: 0}
                break;
            case KEY_RIGHT:
                direction = {x: 1, y: 0}
                break;
            case KEY_UP:
                direction = {x: 0, y: -1}
                break;
            case KEY_DOWN:
                direction = {x: 0, y: 1}
                break;
        }
        this.movePlayerInDirection(direction);
    }
}

  1. Это лучший способ поймать это событие? (угасающий путь)

  2. Как мне добраться до функций компонента из области окна?

ОБНОВЛЕНИЕ:

На основена ответ ниже я просто добавил window.onkeydown = this.onKeyPress.bind(this) и это сработало

Ответы [ 3 ]

2 голосов
/ 21 октября 2019

Специального угольного способа сделать это не существует. Однако есть такие дополнения, как ember-keyboard-shortcuts.

Однако обычно использование window.addEventListener - неплохая идея. Однако вам нужно сделать две вещи:

  1. очистить слушатель, когда компонент уничтожен
  2. привязать событие к контексту функции

Для классическогоКомпонент это может выглядеть так: 

Component.extend({
  init() {
    this.boundOnKeyPress = this.onKeyPress.bind(this);
  },
  didInsertElement() {
    window.addEventListener('keypress', this.boundOnKeyPress);
  },
  willDestroy() {
    window.removeEventListener('keypress', this.boundOnKeyPress);
  },
  onKeyPress() {
    ...
  }
})
0 голосов
/ 22 октября 2019

Мы написали ember-key-manager , потому что он обеспечивает более чистый интерфейс, чем любые другие дополнения событий клавиш. В частности, он предоставляет сервис, поэтому вы можете вводить его где угодно и не застрять, используя миксины (которые сейчас не рекомендуются).

0 голосов
/ 22 октября 2019

Я предпочитаю использовать ember-keyboard addon для этой работы. Это очень хорошее объяснение функций, которые он предлагает, по ссылке ниже: https://github.com/briarsweetbriar/ember-keyboard

. Вам нужно добавить миксин в свой компонент, 

import Ember from 'ember';
import { EKMixin } from 'ember-keyboard';

export default Ember.Component.extend(EKMixin, {
  . . . .
});

, а затем установить keyboardActivated свойство true. Приведенный ниже код будет вызван после метода init. 

activateKeyboard: Ember.on('init', function() {
    this.set('keyboardActivated', true);
  })

Вы должны импортировать требуемое событие 

import { keyPress } from 'ember-keyboard';

onKeyPressHandler: Ember.on(keyPress('Escape'), function() {
        // console.log('escape button pressed');        
    }),

В вашем случае, если вы хотите, чтобы событие вызывалось при каждом нажатии клавиши, тогдапросто не предоставляйте цепочку ключей для keyUp или keyDown. Это может быть удобным способом инициировать события для большого диапазона клавиш, например, для любого буквенно-цифрового нажатия клавиш. Например: 

import { getCode } from 'ember-keyboard';

triggerOnAlphaNumeric: Ember.on(keyUp(), function(event) {
  if (/^Key\w(?!.)/.test(getCode(event))) {
    ...
  }
})
...