14

在我的应用程序中，我有一个面板，其中包含一些设置信息。该面板通过单击按钮打开/关闭，但我也希望能够通过点击esc键盘来关闭它。

我的视图代码如下所示：

Social.MainPanelView = Ember.View.extend({
    elementId: 'panel-account-settings',
    classNames: ['panel', 'closed'],
    keypress: function(e){
        console.log(e);
        console.log('keypress');
    },
    close: function(){
        this.$().prepareTransition().addClass("closed");
    }
});

我也尝试过 keyup 和 keydown 但没有任何反应。我怀疑这是因为这不是一个“输入”类型的视图，而只是一个标准视图。那么如何从关键事件触发视图上的方法呢？

我应该澄清一下，这不在此特定元素的 Route 的上下文中。如本视频所示，我正在独立打开面板：

http://screencast.com/t/tDlyMud7Yb7e

更新 1

这是我创建的一个快速小提琴来说明我遇到的问题。我可以很容易地触发 click 事件，但我正在寻找一个页面范围的 keyup 事件，它将检测 esc 键被按下并触发特定视图上的方法：

4

2 回答 2

22

要使 keyPress 起作用，您必须将焦点放在视图上。当它是输入时，它会起作用，因为您将焦点放在它上面。

像这样的东西：

App = Em.Application.create();

App.IndexController = Em.Controller.extend({
  updateKey: function(keyCode) {
    // Do what you gotta do
    this.set('shortcutKey', keyCode);
  },
  shortcutKey: null
});

App.IndexView = Em.View.extend({
  didInsertElement: function() {
    return this.$().attr({ tabindex: 1 }), this.$().focus();
  },

  keyDown: function(e) {

    this.get('controller').send('updateKey', e.keyCode);
  }
});

这是一个工作示例：http: //jsbin.com/ihuzov/1

于 2013-06-08T14:25:15.897 回答
18

我认为您拼错了按键事件。它应该是keyPress。为了完整起见，以下是 View 可以处理的事件（取自Ember source/doc）：

事件名称

上述任何响应方法的可能事件名称为：

触摸事件：

  • touchStart
  • touchMove
  • touchEnd

  • touchCancel

    键盘事件

  • keyDown

  • keyUp

  • keyPress

    鼠标事件

  • mouseDown

  • mouseUp
  • contextMenu
  • click
  • doubleClick
  • mouseMove
  • focusIn
  • focusOut
  • mouseEnter

  • mouseLeave

    表单事件：

  • submit

  • change
  • focusIn
  • focusOut

  • input

    HTML5 拖放事件：

  • dragStart

  • drag
  • dragEnter
  • dragLeave
  • drop
  • dragEnd
于 2013-03-11T19:37:32.887 回答