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 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有更好的方法吗？

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

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

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

2 个答案: