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

cnjp1d6j 于 2022-11-05 发布在其他

关注(0)|答案(3)|浏览(139)

我是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.这是最好的方式来赶上这个事件吗？（ember的方式）
1.如何从窗口范围访问组件函数？
最新消息：
根据下面的答案，我添加了window.onkeydown = this.onKeyPress.bind(this)，它工作了

ember.js

来源：https://stackoverflow.com/questions/58471154/how-to-handle-keypress-event-properly-in-ember-js-3-13

3条答案

按热度按时间

jpfvwuh41#

没有特别的方法可以做到这一点。但是有像ember-keyboard-shortcuts这样的插件。
但是，一般来说，使用window.addEventListener并不是一个坏主意。但是，您需要做两件事：
1.在组件被破坏时清除侦听器
1.将事件绑定到函数上下文
对于典型组件，可能如下所示：

Component.extend({
  init() {
    this.boundOnKeyPress = this.onKeyPress.bind(this);
  },
  didInsertElement() {
    window.addEventListener('keypress', this.boundOnKeyPress);
  },
  willDestroy() {
    window.removeEventListener('keypress', this.boundOnKeyPress);
  },
  onKeyPress() {
    ...
  }
})

赞(0）回复(0）举报 2022-11-05

yptwkmov2#

我更喜欢使用ember-keyboard插件来完成这项工作。这对它在下面的链接中提供的特性有一个很好的解释，https://github.com/briarsweetbriar/ember-keyboard
首先需要将mixin添加到组件中，

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))) {
    ...
  }
})

赞(0）回复(0）举报 2022-11-05

ars1skjm3#

我们写ember-key-manager是因为它提供了一个比其他键事件插件更干净的接口。特别是，它提供了一个服务，这样你就可以在任何地方注入它，而不用使用mixin（现在已经被弃用了）。

赞(0）回复(0）举报 2022-11-05