在Ember.js v2+中检测按键事件

Question

我在ember v2.3.0中检测按键时遇到了问题。我是一个初学者，尝试编写一个简单的组件来显示按下的键。但是我无法运行操作并使用参数。 基本上，我可以在didRender中使用this.$().on("keypress",function(){ ... });获取keyCode，但我认为在Ember中这不是一个好的实践。有人能帮帮我吗？谢谢：） 以下是我的代码: http://emberjs.jsbin.com/vucenomibo/edit?html,js,output HTML:

  <script type="text/x-handlebars" data-template-name="application">
     <h2>Welcome to Ember.js</h2>
     {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
     {{my-component item=this setAction="smth"}}
  </script>

  <script type="text/x-handlebars" data-template-name="components/my-component">
     <div class="app-body" {{action "smth"}} >
       Pressed: {{pressedKeyCode}}
     </div> 
  </script>

JS:

App = Em.Application.create();

App.IndexController = Em.Controller.extend({
  actions : {

  }
});

App.MyComponentComponent = Em.Component.extend({
  didRender: function() {
    console.log(this.get('context'));
    console.log(this.get('item'));
    return this.$().attr({ tabindex: 1 }), this.$().focus();
  },
  pressedKeyCode: null,
  actions:{
    smth: function(e) {
      console.log('aaa');
      this.send('displayKey', String.fromCharCode(e.keyCode));
    },
    displayKey: function(keyCode) {    
        this.get('item').set('pressedKeyCode', keyCode); 
    }

  }
});

编辑
我把它做成了这样：http://emberjs.jsbin.com/qipeponiqu/1/edit?html,js,output

有人能帮忙审查一下吗？我想学习最佳实践。

- Callen

---

你可以使用 {{action ... parameters ... on="keypress"}}。 - nem035

@nem发现了一个错误，但我仍然不知道如何将按键事件传递给组件的操作。您能看一下吗？:) http://emberjs.jsbin.com/fipiwaqasu/edit?html,js,output - Callen

你好，在你的代码中，你有 setAction="updateKey" 但似乎没有对它进行任何操作？ - locks

Answer 1

官方的Ember.js指南有一节关于事件处理，应该会对您有所帮助。

如果您想让组件处理keydown，可以这样做：

import Ember from 'ember';

export default Ember.Component.extend({
  didRender: function() {
    this.$().attr({ tabindex: 1 });
    this.$().focus();
  },
  shortcutKey: null,

  keyDown(event) {
    this.set('shortcutKey', String.fromCharCode(event.keyCode));
  }
});

请查看完整的Ember Twiddle，但模板与您的相同。

- locks

---

太好了！非常感谢！ :) 我尝试使用 keyDown 事件，但现在我发现我把它放错了代码位置。 - Callen