在 Ember 输入助手中调用操作答案

【问题标题】：Calling action in Ember Input Helper在 Ember 输入助手中调用操作
【发布时间】：2014-05-21 10:23:12
【问题描述】：

我有这个输入框

   {{input {{action 'test2' on="keyDown" allowedKeys="any"}} }}

我无法执行此操作。当我们有这样的事情时，有没有办法调用一个动作？

【问题讨论】：

标签： ember.js handlebars.js

【解决方案1】：

不，这样是不可能的。当您尝试绑定“keyDown”事件时。您不能通过观察文本框的值来实现相同的功能。我在这里给出了示例代码。

模板：

{{input value=myValue}}

控制器：

myValueDidChange : function() {
    // Code here
}.observes('myValue')

【讨论】：

如何读取myValueDidChange函数中输入的值？
Marco - 我认为设计是将输入绑定到控制器的另一个成员。例如：模板中的 {{input value=myValue}}，它将输入绑定到控制器中的 myValue。然后，在 myValueDidChange 函数中，您可以只读取 myValue 的最新值。

【解决方案2】：

现在你可以写：

{{input value=myValue action="test2" on="key-down"}}

【讨论】：

是否可以将参数传递给操作？
@jgomo3：我不知道。但是您可以从控制器中获取值。例如。这个例子：this.controller.get('myValue').

【解决方案3】：

另一个选择，如果你要在多个地方需要这个，那就是创建一个组件。那时你确实可以抓住按键。例如，如果你想要一个数字框，你可以这样做：

<script type="text/x-handlebars" data-template-name="components/numeric-input">
    {{input type='number' value=val classNames='text-align-right'}}
</script>

然后在控制器上：

App.NumericInputComponent = Ember.Component.extend({
       keyPress: function(evt){
       ...code here....
    }
});

最后你可以使用：

{{numeric-input val=productCount}}

【讨论】：

【解决方案4】：

一种解决方案是在您的控制器中注册一个动作并通过事件从输入助手调用它。

控制器中的动作

App.ApplicationController = Ember.Controller.extend({

//Attribute as a component for your template
search: '',

actions: {

    query: function() {
        console.log('ApplicationController > query')
        var query = this.get('search');
        console.log('> ' + query);
        //do something ...
        // this.transitionToRoute('search', { query: query });
    }
}
});

带有按键事件的输入助手：

在每个 keyPress 事件上从您的 ApplicationController 调用操作查询

{{input type="text" class="form-control" placeholder="Query" value=search key-press="query"}}

这里是事件列表：Ember Events

【讨论】：

【解决方案5】：

学分去here:

{{input value=myValue focus-in="focus" key-down="keydown"}}

和

export default Controller.extend({

  // ...

  actions: {
    focus() {
      // ...
    },
    keydown() {
      // ...
    },
  }

以及其他任何事件。

编辑：用 Ember 3.1 测试

【讨论】：