Ember.js如何触发按钮操作按下＆＃34;输入＆＃34;？

Question

如何使用回车键触发操作。我之前已经在按钮上添加了标签，因此它的活动状态为＆＃34;。对于输入，我可以去输入=＆＃39; actionName＆＃39; ，这对按钮不起作用。

<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。它可能需要稍微改造。