Ember.js 如何在余烬文本字段中调用键控操作

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

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

我不得不使用

keyPress

而不是

keyUp

，因为。这起作用了，除了在

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中实现这一点？

您需要使用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"}}

---

这也可以在模板的路由中完成，或者更好的是，使用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"}}

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