Question

我有这个输入字段

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

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

Answer 1

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

模板：

{{input value=myValue}}

控制器：

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

Answer 2

现在你可以写：

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

有关详细信息，请参阅：http://guides.emberjs.com/v1.10.0/templates/input-helpers/#toc_actions

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

Answer 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

Answer 5

致谢here：

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

和

export default Controller.extend({

  // ...

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

以及任何其他事件。

编辑：使用Ember 3.1进行测试

在Ember输入助手中调用动作

5 个答案: