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