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

Question

I'm building an input that I want to be able to control and validate on the fly. I have a card-input component, which I've set up to use like this:

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

My card-input.hbs component looks like this:

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

And finally my card-input.js component file:

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)
    }
  }

});

Currently the value of the input is being set as cardNumber . Whenever I key-press on the card-input , I want to be able to control and set the cardNumber , which will then be updated back at the card-input .

Not even sure this is the best way to do things. Any help would be greatly appreciated.

Answer 1

You can pass cardNumber .

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

and use it inside input helper.

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

Answer 2

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

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