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。 可能需要一點重新加工。