绑定 Ember 输入组件以控制每次按键时的更新

Question

我正在构建一个我希望能够即时控制和验证的输入。我有一个 card-input 组件，我将其设置为这样使用：

{{card-input placeholder="Card number" action="handleCardNumber" value="cardNumber"}}

我的 card-input.hbs 组件如下所示：

{{input placeholder=placeholder value=value key-press=action}}

最后是我的 card-input.js 组件文件：

import Ember from 'ember';

export default Ember.Component.extend({

  classNames: ['checkout-form-group'],

  cardNumber: null,

  actions: {
    handleCardNumber (value) {
      // do some stuff with the value
      this.set('cardNumber', value)
    }
  }

});

当前输入值设置为cardNumber。每当我在 card-input 上 key-press 时，我希望能够控制和设置 cardNumber，然后它会在 card-input 处更新回来。

甚至不确定这是做事的最佳方式。任何帮助将不胜感激。

Answer 1

您可以使用普通的 HTML5 元素并且只绑定操作：

<input placeholder={{placeholder}} value={{value}} onkeypress={{action 'handleCardNumber' value='target.value'}} />

Answer 2

你可以通过cardNumber.

{{card-input placeholder="Card number" action="handleCardNumber" cardNumber=cardNumber}}

并在输入助手中使用它。

{{input placeholder=placeholder value=cardNumber key-press=action}}

绑定 Ember 输入组件以控制每次按键时的更新

Binding Ember input component to control update on every key-press

javascript

ember.js