ember.js：为什么 on-input 事件不起作用？

Question

遵循 ember.js 2.3.0 指南的示例， 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);
    }
  }
});

我写我的代码如下：

模板.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>

控制器.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);
    }
  }
});

运行代码，日志是

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

当 input 的值改变时，oninput 事件和 change 事件都不起作用。

我只想用 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);
});

任何提示将不胜感激。提前致谢。

Answer 1

应该在 ember 中使用的事件名称是'input'而不是'on-input'。

检查https://guides.emberjs.com/v2.11.0/components/handling-events/以获取 ember 组件支持的事件列表。

示例组件

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

当oninput事件被触发时，将调用valChange动作。

Answer 2

来自文档http://emberjs.com/api/classes/Ember.Templates.helpers.html#method_input

帮助器允许某些用户事件发送操作。

• enter
• insert-newline
• escape-press
• focus-in
• focus-out
• key-press
• key-up

计算属性或绑定到输入的属性上的观察者将在其发生任何更改时触发。我的答案实际上取决于您的最终目标，即当事情发生变化时您希望发生什么。