如何在 Ember 文本字段中对 keyUp 调用操作答案

【问题标题】：How to invoke an action on keyUp in Ember text field如何在 Ember 文本字段中对 keyUp 调用操作
【发布时间】：2014-03-27 16:59:48
【问题描述】：

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

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

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

我尝试使用TextField 视图：

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

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

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

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

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

【问题讨论】：

标签： ember.js

【解决方案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"}}

【讨论】：

【解决方案2】：

这也可以在模板的路由中完成，或者更好的是，在使用 key-up="actionname" 的组件中完成。

在组件中处理输入字段的数据（以及与之相关的任何其他数据）将利用 Ember 的默认值，而不是添加新逻辑，并且只允许处理返回的数据。

//.js
import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    checkQty(q) {
      console.log(q);
    }
  }
});

//.hbs
{{input type="text" key-up="checkQty"}}

如果您需要通过将输入绑定到属性来编辑操作中输入的数量，则可以更进一步。

// .js
import Ember from 'ember';

export default Ember.Component.extend({
  qty: 0,
  actions: {
    checkQty(q) {
      console.log(this.get(qty));
    }
  }
});

// .hbs
{{input type="text" value=qty key-up="checkQty"}}

【讨论】：