EmberJs的输入onkeypress事件未发送到组件

EmberJs input onkeypress event not sent to component

本文关键字：组件 事件 输入 onkeypress EmberJs      更新时间：2023-09-26

我使用的是EmberJS，我希望当用户在我的搜索栏中键入一个键时，会向我的组件发送一个操作。我读过(http://emberjs.com/api/classes/Ember.TextSupport.html#property_onEvent)我应该把onEvent="keyPress">放在我的输入中，但它不起作用。目前，如果我键入一些文本，search()方法不会被调用，但如果我按enter键，就会被调用。

这是我的模板：

<div id="command-manager">
    {{input type="search" action="search" onEvent="keyPress" placeholder="Enter a command here" maxlength="32"}}
</div>

这是我的组件：

var CommandManagerComponent = Ember.Component.extend({
  actions:{
    search:function() {
      console.log('search');
    }
  }
});

正如你所看到的，这很简单，我不知道我做错了什么。

http://emberjs.com/guides/components/sending-actions-from-components-to-your-application/

通常，您应该将组件操作视为转换基元事件(如鼠标单击或元素暂停事件(转换为在应用程序中具有语义意义的动作。

否则，请使用视图进行UI转换/效果。

现在，要对组件使用操作，您需要使用sendAction()。

示例：http://emberjs.jsbin.com/wofom/1/edit

我遇到了完全相同的问题。组件与视图的关系可能很棘手。

我发现扩展助手是最快的方法。试试这个：

var CommandManager = Ember.TextField.extend({
    keyUp: function ( event ) {
        // targetObject is the active view controller
        // this function will look for the search action
        // on your controller
        this.get('targetObject').send('search');
    }
});
Ember.Handlebars.helper('command-manager', CommandManager);

你可以在你的模板中这样称呼它：

<div id="command-manager">
    {{command-manager placeholder="Enter a command here" maxlength="32"}}
</div>

票据

  1. 这将输入标准文本输入，而不是搜索输入，是好吗
  2. 我假设你正在使用控制器，如果你没有，那么就删除this.get('targetObject').send('search');部分并运行CCD_ 4函数中的代码

我希望这能有所帮助。祝你好运

相关文章：