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

Question

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

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

这正确地初始化了文本字段的值并在我的 Controller 的 actions 哈希中调用了 checkQty() 函数，但是我没有得到 qty 的更新值。所以看起来 bind-attr 是一种单向交易。

我尝试使用 TextField View :

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

我必须使用 keyPress 而不是 keyUp 因为 onEvent only allows enter or keyPress .这行得通，除了在 keyPress 上读取 qty 的值会在用户按下键之前而不是之后为我提供该字段的值。

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

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

并在我的 Controller 中创建了一个观察者:

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

这样可行，但现在我对构建我的 Ember 应用程序的最佳实践感到困惑。 似乎规定的方法是让您的模板有效地调用 Controller 上的操作。我对观察者的使用感觉就像是一种 hack 来解决我在模板中无法使其工作的失败。

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

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

然后我的模板变成了:

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

在 Ember 中是否有更好的方法来实现这一点？

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"}}