ember.js: Why does the on-input event not work?

Question

Following the example of the ember.js 2.3.0 guide, EMBER.TEMPLATES.HELPERS CLASS

export default Ember.Component.extend({
  actions: {
    // Usage {{input on-input=(action (action 'setName' model) value="target.value")}}
    setName(model, name) {
      model.set('name', name);
    }
  }
});

I write my code as follows:

template.hbs

<div>
{{input type='text' id='Txt01' value='firstName'
  on-input=(action "onInput")
  key-press=(action "onKeyPress")
  key-down=(action "onKeyDown")
  key-up=(action "onKeyUp")
  change=(action "onChange")}}
</div>

controller.js

export default Ember.Controller.extend({
  actions: {
    onKeyPress() {
      console.log('Text-Key-Pressed');
    },
    onKeyDown() {
      console.log('Text-Key-Down');
    },
    onKeyUp() {
      console.log('Text-Key-Up');
    },
    onInput() {
      var value = Ember.$('#Txt01').val();
      console.log('onInput:' + value);
    },
    onChange() {
      var value = Ember.$('#Txt01').val();
      console.log('onInput:' + value);
    }
  }
});

Run the code, the logs are

Text-Key-Down
Text-Key-Pressed
Text-Key-Up

Both oninput event and change event do not work when the value of input is changed.

I just want to achieve the following functions with ember.js.

<input type="text" id="text1" value="hello!">
document.getElementById('text1').addEventListener('input', function(){
  var temp = $('#text1').val();
  console.log('Text1: ' + temp);
}, false);

$('#text1').bind('input propertychange', function() {
  var temp = $('#text1').val();
  console.log('Text1: ' + temp);
});

Any hints will be appreciated. Thanks in advance.

Answer 1

The event name that should be used in ember is 'input' instead of 'on-input'.

Check https://guides.emberjs.com/v2.11.0/components/handling-events/ for the list of events supported by ember components.

Sample Component

{{textarea
  value=value
  input=(action "valChange")}}

valChange action will be called when oninput event is fired.