텍스트 필드가있는 Ember 구성 요소

Question

텍스트 필드를 감싸는 엠버 구성 요소가 있습니다. 사용자가 입력 할 때 검색 작업을 시작하려고합니다.

#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" 

이

는 값 및 기간 간의 바인딩을 유지하지만 KeyUp 이벤트는 검색 창 성분에 거품을 엠버 입력 요소로 진행하지 않는다. =을 삭제하고 대신 표준 HTML 입력을 사용하면 작업이 올바른 구성 요소로 전송되지만 바인딩이 끊어져서 검색어가 손실됩니다.

구성 요소 내부에서 동작과 함께 입력을 사용하는 적절한 방법은 무엇입니까?

EDIT : 다른 방법 (이 경우, 제) 비 활동 기간 후에 검색의 추가 어려움 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 호출 내에서 익명 함수를 만들면 작동하지만 엠버 객체에 대한 메서드를 호출하면 작동하지 않습니다.

Answer 1

당신은 jQuery를 마우스 구성 요소의 didInsertElement 후크에서 이벤트를 설정할 수 있습니다 : 두 번째 접근 방식에 대해서는

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

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

을, 당신은 Ember.run.later을 사용하여 함수의 컨텍스트를 지정할 수 있습니다. 참고 : setTimeout으로 전화 한 후 닫는 괄호가 누락되었습니다.

내가 (코드에서 term) search_term의 값을 관찰하여 동일한 검색 역학을 구현했습니다

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

Answer 2

와

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

를 교체합니다. 나는 당신이 그렇게 할 수 있다고 생각합니다. 옵서버를 App.SearchBoxComponent에 설정하고 인 경우 search 액션을 실행해야합니다.