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

我按如下方式编写代码：

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

运行代码，日志

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

当输入值改变时，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

来自文档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 2

应在ember中使用的事件名称是＆＃39;输入＆＃39; ，而不是＆＃39; on-input＆＃39; 。

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

样本组件

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

当 oninput 事件被触发时，将会调用

valChange 操作。

Answer 3

2019年6月：

有2种书写方式

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

查看Ember为什么在Ember Core中内置了input组件

Stef＆Rob：我们仍然需要内置的Input组件吗？ -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

您可以编写经典的html元素input

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

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

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

ember.js：为什么输入事件不起作用？

3 个答案: