我被迫使用较旧版本的Ember,需要在用户输入文本字段时执行操作。
我通过以下方式约束了行动:
{{action="myAction" on="key-press"}}
或
{{key-press="myAction"}}
除非我按退格/删除以删除值,否则这两个都会触发。我需要在这个用例中触发事件。
一些谷歌搜索结果显示人们建议使用key-up
或key-down
,但当我以与上面所示相同的方式绑定这些事件时,我的行为永远不会被解雇。
感觉我在这里错过了一些愚蠢的东西,任何输入都会非常感激。
我担心升级Ember版本不是一种选择。
编辑:
我已设法使用以下语法触发keyUp
事件,但这会禁用在我的输入字段上触发验证。
<input type="text" {{bind-attr class=":form-input errors.myField:error"}} {{bind-attr value=myField}} {{action "myAction" on="keyUp"}} />
仔细观察,当我查看Ember检查器时,我刚刚将单个属性绑定到的原始输入也不像表单中的其他属性那样显示为Ember.TextField
。我认为是导致验证不被解雇的原因。
答案 0 :(得分:1)
对于输入助手,如果使用on
关键字,则必须对事件名称进行二值化。
{{input value="test" action="myAction" on="key-up"}}
对于普通输入元素,
<input type="text" {{action "myAction" on="keyUp"}} />
修改强>
对于病房key-up
上的ember版本1.13正在运行。就像你说它不适用于旧版本1.13。为此我建议遵循这个,
创建扩展Ember.TextField的my-input组件,并具有keyUp函数来处理keyUp事件。
import Ember from 'ember';
export default Ember.TextField.extend({
keyUp(event){
console.log('keyup event',event);
}
//You can write keyPress and other functions too if required.
});
您可以使用{{my-input value="test" action="myAction"}}
代替input
帮助。
<强> EDIT2 强>
您不需要创建组件只是为了使keyUp事件工作,一个肯定是错误的,抱歉。因为还有一种语法可以使它工作,
{{input value="kumkan" key-up="keyUpFromApp"}}
在控制器中定义动作,
<强>控制器/ applications.js 强>
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
actions:{
keyUpFromApp(value,event){
console.log('keyup-event ',value, ' event ',event);
}
}
});
供参考,http://emberjs.com/api/classes/Ember.TextField.html#method_keyUp 要玩:Ember-twiddle