綁定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

您可以傳遞cardNumber 。

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

並在輸入助手中使用它。

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

Answer 2

您可以使用普通的HTML5元素，並且只能綁定操作：

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