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 
    } 
});