Question

我有一个包装文本字段的ember组件。当用户输入我想触发搜索操作时。

#search-box.js.coffee
App.SearchBoxComponent = Ember.Component.extend
  classNames: ['form-group', 'has-feedback']
  term: ""
  placeholder: "Search"

  actions:
    search: ->
      console.log "Searching..."

# search-box.emblem
= input type="text" value=term class="form-control" placeholder=placeholder keyUp="search"

这维护了值和term之间的绑定，但keyUp事件转到Ember Input组件，并且不会冒泡到搜索框组件。如果我删除=而不是使用标准HTML输入，我会将操作发送到正确的组件，但绑定会中断，我会丢失搜索词。

在组件内部使用动作的输入的正确方法是什么？

编辑：另一种方法

尝试使用JQuery，在指定的不活动时间（在这种情况下是第二次）后搜索更加困难：

App.SearchBoxComponent = Ember.Component.extend
  classNames: ['form-group', 'has-feedback']
  delay: 1000
  didInsertElement: ->
    $input = @$('input')
    $input.on 'keyup', =>
      clearTimeout(timer)
      if $input.val
        console.log this
        timer = setTimeout(@_performSearch, @get('delay')
  _performSearch: ->
    console.log this
    console.log "Searching for #{@get('q')}"

调用_performSearch时，this现在为window，并且已丢失了Ember类的上下文。我也尝试制作一切胖箭，以确保没有任何功能改变this的上下文，但无济于事。如果我在setTimeout调用中创建一个匿名函数，它将起作用，但如果我在ember对象上调用一个方法则不行。

Answer 1

您可以在组件的didInsertElement挂钩中设置jQuery鼠标事件：

App.SearchBoxComponent = Ember.Component.extend
  classNames: ['form-group', 'has-feedback']
  term: ""
  placeholder: "Search"

  didInsertElement: ->
    @$('input').keyup => 
      console.log 'Searching...'

关于第二种方法，您可以使用Ember.run.later指定函数的上下文。注意：在致电setTimeout后，您也错过了结束括号。

替换

timer = setTimeout(@_performSearch, @get('delay'))

与

Ember.run.later(@,@_performSearch, @get('delay'))

Answer 2

我通过在代码中观察search_term（term的值）来实现相同的搜索机制。我想你可以试着这样做。如果App.SearchBoxComponent，则需要在search中设置观察者，从那里触发!Em.Empty(this.get('term')操作。

带有文本字段的Ember组件

2 个答案: