如何在Ember文本字段中调用keyUp上的操作

Question

刚开始使用Ember,我想在用户在文本字段中键入内容时执行一些操作.我第一次尝试这个

<input type="text" {{bind-attr value=qty}} {{action "checkQty" on="keyUp"}}/>

这正确地初始化了文本字段的值并checkQty()在我的控制器的actions哈希中调用了该函数,但是我没有得到更新的值qty.所以这似乎bind-attr是一种单向交易.

我尝试使用TextField视图:

{{view Ember.TextField value=qty onEvent="keyPress" action="checkQty"}}

我不得不使用keyPress而不是keyUp因为onEvent只允许输入或keyPress.这有效,除了读取数值keyPress的值在用户按下键之前给出了字段的值,而不是之后.

所以我最后使用输入助手来指定字段:

{{input type="text" value=qty}}

并在我的控制器中创建了一个观察者:

checkQty: function() {
  Ember.Logger.log('qty: ', this.get('qty'));
}.observes('qty').on('change')

这样可行,但现在我对构建我的Ember应用程序的最佳实践感到困惑.它看起来像规定的方法对你的模板,以有效地打电话给你的控制器上的行动.我对观察者的使用感觉就像是一个黑客来解决我在模板中工作的失败.

在查看Ember源代码之后,我能够扩展TextField以获得我想要的行为:

MyApp.TextField = Ember.TextField.extend({
  keyUp: function(event) {
    this.sendAction('action', this.value);
  }
});

然后我的模板成了:

{{view MyApp.TextField value=qty onEvent="keyUp" action="checkQty"}}

在恩伯有没有更好的方法来实现这一目标？

Answer 1

您需要使用sendAction方法,这是一个示例

# coffeescript code sample
window.App = Ember.Application.create()

# define the keyupaction callback on all TextField views
Em.TextField.reopen
  keyUp: (e) ->
    @sendAction('keyUpAction', e)

# the keyup callback specific for each controller
App.ApplicationController = Em.Controller.extend
  actions:
    foobar: ->
      console.log 'do yor validation here'

# the text field view
{{view Em.TextField valueBinding="firstName" keyUpAction="foobar"}}