如何在Ember js 3.13中正确处理按键事件

Question

我是Ember的新手，我想捕获一个全局按键事件并在我的组件中处理它。

[经过大量的网络爬虫之后，我用全局window.onkeydown = this.handleKeyPress来完成了旧的方式，并在handleKeyPress函数上做了一些代码并调用了this.movePlayerInDirection，但现在我的“这是窗口”。

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. 我如何从窗口范围访问组件功能？

Answer 1

没有特殊的余烬方法。但是，有类似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() {
    ...
  }
})