Question

我有一个模态的Ember组件。模态通常包含表单，因此我在组件中使用keyPressed方法来捕获各种事件，包括任何enter事件（键代码13）。这将获取所有输入事件，但源自焦点{{input}}字段的事件除外。看起来Ember是deliberately blocking these events from bubbling，我可以从输入中捕获所有其他按键事件。

我还没有找到一种干净的方式从我的组件中捕获事件。我不想扩展任何东西并使用它，或者使用特定控制器上的操作，或者其他任何类似的控制器，因为它们都觉得对于非常简单的东西来说是肮脏的变通方法，而且似乎是一个明显的用途-案件。我怎么能这样做？

编辑：很少的例子，帮助澄清我的意思。当用户在输入字段中输入时，我希望keyPressed能够运行。

// Relevant section of component
App.MyModalComponent = Ember.Component.extend({
    // ...
    keyPressed: function (e) {
        if (e.which === 13) {
            console.log('Do something here, like submit the form');
        }
    },
    // ...
});

// Example of template
{{#my-modal}}
    <form>
        {{input value=foo}}
    </form>
{{/my-modal}}

Answer 1

您是在谈论keyPress我是否认为keyPressed是受支持的事件（http://emberjs.com/guides/understanding-ember/the-view-layer/#toc_adding-new-events）。

App.MyModalComponent = Ember.Component.extend({
  foo:'component', 
    keyPress: function (e) {
      console.log('asdf');
        if (e.which === 13) {
            console.log('Do something here, like submit the form');
        }
    }
});

http://emberjs.jsbin.com/ciqomaqo/1/edit

Answer 2

如果是提交表单，使用浏览器的表单提交功能是有意义的。您还可以将组件元素本身设为表单：

Ember.Component.extend({
  tagName: 'form',
  submit: function(e) {
    e.preventDefault(); // To avoid page reload on event propagation
    // Do things
  }
});

如何从组件中的Ember输入中捕获enter事件？

2 个答案: