Question

我有Handlebars视图，其中包含以下搜索输入字段：

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

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

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

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

Answer 1

经过this，我想你可以添加

keyUp: function(evt) {
  this.get('controller').send('submit'); 
}

或者

keyUp: function(evt) {
  this.get('controller').send('submit', this.get('controller.query')); 
}

到您的视图（或者更确切地说是扩展Ember.TextField的视图）。

另一种可能性可能是使用{{action "submit" controller.query on="keyUp"}}，但我不太确定如何将其与{{view}}帮助器结合使用。

Answer 2

如果您使用

HBS：

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

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

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：

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

实际上，您不需要从视图中将参数传递给submit方法，因为控制器已将此信息更新为query变量。

Ember.TextField在keyup事件上提交

2 个答案: