0

我有带有以下搜索输入字段的 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 事件上触发“提交”功能而不是“回车”？换句话说，每次用户从输入字段中添加或删除字符时，控制器中的“提交”功能是否可以重新运行？

4

2 回答 2

0

如果你使用

HB:

{{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类：

HB:

{{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

于 2014-01-18T10:14:40.653 回答
0

按照这个，我想你可以添加

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}}助手结合使用。

于 2013-04-04T08:38:52.757 回答