Ember組件可以在不傳入模板的情況下繼承父組件屬性嗎？

我有幾個與父母和孩子的部分來的組件。作爲一個例子，將一個Ember組件看作是一個標籤菜單的解決方案，它可能看起來像這樣。Ember組件可以在不傳入模板的情況下繼承父組件屬性嗎？

{{#tab-set}} 
    {{tab-single title=PageA selected=true}} 
    {{tab-single title=PageB}} 
    {{tab-single title=PageC}} 
{{/tab-set}}

選項卡需要一種方法來知道應該選擇哪個選項。 標籤集可能有一個名爲取消選擇器的屬性。這可以傳遞給所有的孩子tab-singles。當單擊一個選項卡 - 單個時，它將切換取消選擇器屬性，所有其他子項選項卡單個將會觀察到屬性，確保全部取消選擇。這將允許點擊選項卡單成爲選定的選項卡。

它可能是這個樣子......

{{#tab-set}} 
    {{tab-single title=PageA selected=true deselector=deselector}} 
    {{tab-single title=PageB deselector=deselector}} 
    {{tab-single title=PageC deselector=deselector}} 
{{/tab-set}}

對於每一個我永遠做標籤，我需要在deselector通過。有沒有辦法，我可以設置選項卡單總是尋找取消選擇屬性在其父母選項卡集？

也就是說，是否有一種方法，子組件總是可以從其父組件中查找屬性，而不必在模板中傳遞？

來源

2016-11-12 rjoxford

有一種方法可以處理上下文組件。你需要做的是產生tab-single組件，並且已經綁定了deselector，而不是直接使用tab-single。

I've made a working Twiddle所以你可以看看它。

首先，我們產生具有deselector動作範圍的組件。我正在使用哈希幫助器構建一個對象內聯。這使得導出的變量更加結構化。

// app/templates/components/tab-set.hbs 
{{yield (hash tab=(component 'tab-single' deselector=deselector))}}

爲了能夠綁定deselector動作那樣的，意味着我們必須將它傳遞給tab-set。由於我們使用的是塊表格和yield，我們將會有所謂的塊參數。考慮{{each array as |item|}}語法。項目能是什麼名字，你看更適合：

{{#tab-set deselector=(action 'deselector') as |opts|}} 
    {{opts.tab page="1"}} 
    {{opts.tab page="2"}} 
    {{opts.tab page="3"}} 
{{/tab-set}}

希望這足以回答您的問題:)

來源

2016-11-12 09:56:13 locks

Ember組件可以在不傳入模板的情況下繼承父組件屬性嗎？

回答

相關問題