2016-12-11 39 views
1

組件的實例我有一個「容器」組件訪問從父組件在EmberJS

# components/container-component.js 

import Ember from 'ember'; 
export default Ember.Component.extend({ 
    displayComponent: 'simple-box' 
}); 

模板是

# templates/container-component.hbs 

<div> 
    {{component displayComponent}} 
</div> 

現在,從「容器組件」實例中。我如何訪問計算的「displayComponent」實例?

關於如何去做的任何想法?

當我使用得到方法,我得到的組件的字符串確定

this.get('displayComponent') 
# returns (String) 'simple-box' 
+0

你想用這個實例做什麼? – ykaragol

+0

謝謝,你能看看我的評論嗎? http://stackoverflow.com/questions/41089339/access-the-instance-of-the-component-from-parent-component-in-emberjs?noredirect=1#comment69398007_41089703 –

回答

4

沒有從父組件的js文件檢索子組件,據我所知道的一個內置的方式。如果你真的想做到這一點,請參考我爲你準備的twiddle

正如你可以從代碼中看到的那樣;在父模板中,父模塊將其自身傳遞給子模塊,子模塊將其自身註冊到父模塊。請注意,這是代碼異味的例證,這是我從未在我的項目中使用的東西。

因爲在我看來,你試圖達到的目標明顯違反了許多基於燼的原則。爲什麼你想直接從父母那裏獲得孩子的財產?您可以將操作註冊到子組件並獲取子組件內各種事件的通知。你爲什麼需要直接訪問?一個組件獨立工作會更好。在這種方法中,您正在使用子組件的內部設計考慮因素來污染父代的代碼。您可以通過父級內的jquery查詢DOM樹,但是獲取由Ember基礎架構爲您創建的子組件實例表明您正試圖設計一些超出Ember方法的東西。如果您發佈另一個問題(或修改這個問題)來描述您的意圖,我們可以幫助您更好。可能有人可能會導致你更好的設計。最好的祝福。

+0

明智的解釋。謝謝!是的,我按照你展示的方式實施它。是的,我似乎違反了原則。這意味着,我應該嘗試以不同的方式完成它。 所以我想要組件間通信的原因。是因爲我需要在父組件中更新一個特定的dom元素。反之亦然。 你能否解釋一下你所說的「......通知各種事件」。 此外,我想有一個「服務」,可以由兩個組件共享。那有意義嗎? –

+0

我想說的是,子組件應僅在需要時通過操作通知父組件。這將提供孩子和父母之間的明確的關注分離(客戶應該被放置在另一個父母中,並且父母應該包含其他孩子)。你可以參考[正式的灰燼指南](https://guides.emberjs.com/v2.10.0/components/triggering-changes-with-actions/)通知家長有關孩子的變化。我將準備兩個新的小玩意來說明希望在晚上的孩子父母之間的正確溝通方式。 – alptugd

+0

關於共享服務;看到一些小代碼在執行時可能會更好。它應該在相同的情況下有意義,但在其他情況下不應該。我會去發送孩子的行爲,並最初在父母處理這些行爲。 – alptugd