Ember.TextField在keyup事件上提交 [英] Ember.TextField submit on keyup event

问题描述

我有Handlebars视图与以下搜索输入字段：

I have Handlebars view with the following search input field:

{{view Ember.TextField valueBinding="controller.query" action="submit"}}

当用户从搜索输入字段按Enter我们调用外部API，获取响应并相应地查询结果。这是控制器的（简化）版本的代码：

when a user presses 'Enter' from the search input field, we make a call to an external API, get response, and query the results accordingly. Here is the code of the (simplified) version of the controller:

App.ProductsController = Ember.ArrayController.extend({
  submit: function(query) {
  // call to external api
  // get response
  // update some values
  }
});

我们如何在keyUp事件而不是Enter上触发submit功能？换句话说，每当用户从输入字段中添加或删除字符时，可以重新运行控制器中的提交功能？

How do we trigger "submit" function on the keyUp event instead of 'Enter'? In other words, can the "submit" function in the controller be re-run every time user adds or removes a character from the input field?

推荐答案

如果您使用

hbs：

{{view Ember.TextField valueBinding="controller.query"
                       action="submit" class="my-input"}}

然后在视图中，您需要订阅 keyUp 事件。由于事件在整个视图中触发（在这种情况下，仅适用于支持此类事件的元素，输入内容，可编辑内容等），您需要检查您要查找的输入。

then in the view you need to subscribe to keyUp event. Since events fire up on whole view (in this case only for elements that support this type of event, inputs, content editable, etc inside the view), you need to check for the input you are looking for.

js：

App.ProductsView = Ember.View.extend({
  keyUp: function (e) {
    if ($(e.target).hasClass('my-input')) { // you can use other identifier
      this.get('controller').submit(e.target.value);
    }
  }
});

另一个想法是扩展 Ember.TextField 类：

hbs：

{{view App.ProductTextField valueBinding="controller.query"
                            action="submit"}}

js： p>

js:

App.ProductTextField = Ember.TextField.extend({
  keyUp: function (e) {
      this.get('controller').submit(e.target.value);
  }
});

其实你不需要将参数传递给 submit 方法，因为控制器在查询变量中已经有最新的信息。

Actually you don't need to pass parameter to submit method from view, since controller has this information already up to date in query variable.

这篇关于Ember.TextField在keyup事件上提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！