Ember.js如何触发按下“ enter”的按钮动作？

Question

如何使用Enter键触发动作。 之前，我已经在按钮上进行了标签调整，以使其处于“活动状态”。 对于输入，我可以输入='actionName' ，它不适用于按钮。

<div class="input-group">
    {{clickable-textfield value=value placeholder=inputPlaceholder}}

    <span class="input-group-btn">
        <button class="btn btn-default" type="button" {{action 'manuallySelect'}}>
            <span class="icon-user"></span>
        </button>
    </span>
</div>

Answer 1

表单应该包装在<form>标记中，并且您可以在操作中使用on='submit' ：

  <form {{action 'saveBook' book on='submit'}} class="form-inline">
    <div class="input-group">
      {{input value=book.title class='form-control'}}
      <div class="input-group-btn">
        <button type="submit" class="btn btn-success" disabled={{book.isNotValid}}>Save</button>
        <button class="btn btn-danger" {{action 'cancelBookEdit' book}}>Cancel</button>
      </div>
    </div>
  </form>

来源： https://github.com/zoltan-nz/library-app1 | http://yoember.com

Answer 2

为此，您很有可能需要创建一个组件。

ember g component enterable-button

然后，在组件文件中，您需要侦听按键事件，并检查它们是否按下的键是回车键。

// components/enterable-button.js
import Ember from 'ember';

export default Ember.Component.extend({
    tagName: 'button',
    className: 'btn',
    keyPress(event) {
        if (event.keyCode === 13) {
            this.sendAction('enter');
        }
    }
});

现在，在模板中，您将像这样调用组件：

{{#enterable-button class="btn-default" enter='manuallySelect'}}
  <span class="icon-user"></span>
{{/enterable-button}}

这应该可以，但是我现在无法创建jsbin。 可能需要一点重新加工。