余烬.js:为什么输入事件不起作用

Question

以余烬为例.js 2.3.0 指南，余烬。模板。助手类

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

当输入值发生更改时，oninput 事件和更改事件都不起作用。

我只想用余烬.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

余烬中应该使用的事件名称是"input"而不是"on-input"。

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

示例组件

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

valChange 操作将在触发 oninput 事件时调用。

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

计算属性或绑定到输入的属性上的观察者将在更改时触发。 我的答案实际上取决于你最终的目标，即当它发生变化时你想要发生什么。

Answer 3

2019 年 6 月：

有两种写法

1. 使用 Ember 提供的{{input}}组件

看看为什么Ember有一个内置input组件的Ember Core。

Stef & Rob：我们还需要内置的输入组件吗？ - YouTube https://www.youtube.com/watch?v=c0Rl6o9wLX0&feature=youtu.be

你可以写成

{{input value="hello world" input=(action "inputActionEventTrigger")}}

活动列表在这里 https://guides.emberjs.com/v3.4.0/components/handling-events/#toc_event-names

2. 您可以在经典的 html 元素中编写input

<input value="helloworld" oninput={{action "inputActionEventTrigger"}}/>

参考自w3cschool： https://www.w3schools.com/jsref/event_oninput.asp

我希望它有所帮助。谢谢。