Ember : 전 세계에서 사용할 수있는 검색 구성 요소 (및 작업)?

Question

앱의 어느 위치 에나 배치 할 수있는 구성 요소 안에 검색 필드가 있어야합니다. 모든 템플릿에 표시되거나 구성 요소에 중첩 될 수 있습니다. 검색 양식은 사용자 입력 (검색어)을 수락하고 submit은 결과 템플릿으로 전환하는 검색 작업을 트리거합니다.

간단하지만 충분히 작동 할 수있는 방법을 생각할 수 없습니다. 내가 할 수 있다면, 처음에 입력 된 용어를 어떻게 행동에 전달합니까? Ember CLI로 양식 제출을 처리하는 방법에 대한 놀랍도록 작은 정보가 있습니다.

지금까지 나는 action = '/ results'을 가진 정규 양식을 제출했습니다. 하지만 그것은 분명히 앱을 다시로드하고 있습니다.

이 같은 인덱스 컨트롤러에서 작업을 만드는 장난 봤는데 :

export default Ember.Controller.extend(defaultParams, { 
    term: '', 
    actions: { 
     keywordSearch() { 
      this.transitionToRoute('results', { queryParams: { q: this.get('term') }}); 
     } 
    } 
}); 

그런 다음 인덱스 템플릿에서 깊은 2 중첩 내 검색 구성 요소, 아래로 폐쇄 조치를 전달합니다.

index.hbs :

{{index-search keywordSearch=(action "keywordSearch")}} 

인덱스 search.hbs (성분)

{{search-field keywordSearch=keywordSearch }} 

검색 field.hbs (중첩 된 요소)

<form {{ action (action keywordSearch) on='submit' }}> 
{{ input value=term }} 
<button type="submit">Search</button> 
</form> 

그리고 작업을 실행하지만 term은 제공되지 않습니다. 폐쇄 조치에 term을 어떻게 보냅니 까?

그리고 ... 정말 검색 필드가 앱에 표시 될 모든 장소로 작업을 전달해야합니까, 아니면 더 쉬운 방법일까요?

Answer 1

모든 구성 요소와 경로에 작업을 작성하는 대신 검색 할 서비스를 만들 수 있습니다. 구성 요소에 서비스를 주입하고 서비스 방법에서 경로 전환을 처리합니다.

검색 - component.hbs, 아래의 샘플 코드를 확인

<form {{ action (action search) on='submit' }}> 
{{ input value=keyword }} 
<button type="submit">Search</button> 
</form> 

검색 - component.js

export default Ember.Component.extend({ 

    globalSearch: Ember.inject.service('search'), 

    actions: { 
    search() { 
     const { keyword } = this.getProperties('keyword'); 
     this.get('globalSearch').showResults(keyword).then(() => { 
     alert('Success'); 
     }, (err) => { 
     alert('Error while searching: ' + err.responseText); 
     }); 
    } 
    } 

}); 

서비스 - 응용 프로그램/서비스/search.js

import Ember from 'ember'; 

export default Ember.Service.extend({ 

    init() { 
    this._super(...arguments); 
    }, 

    showResults(keyword) { 
    // write code for transition to search results route here 
    } 
});