“didInsertElement”的 Ember Octane 替代品是什么？

Question

我正在嘗試觸發從父組件傳遞的回調。 我們處理這個問題的舊模式是調用 didInsertElement 中的函數。 在 Octane 中，我看到我們可以使用did-insert修飾符，但這對於這個用例來說似乎很奇怪，因為我們沒有更新我們用來調用 did-insert 的 DOM 元素。 我還看到onRender在一些情況下被使用，但我沒有看到關於它的文檔，它並沒有為我開火。 有什么建議？

對於這個特定的用例，我們有一個父組件，它可以有許多子組件之一。 對於每個子組件，我們都有特定的文本顯示在父組件中，我們希望子組件成為該文本的所有者。

Answer 1

我認為，您認為did-insert不是正確解決方案的直覺是正確的。 一般來說，修飾符應該只在它們將要附加到的元素以某種方式使用時使用——也就是說，用於管理與 DOM 的交互。 一般來說，我們更喜歡單向數據流。 但是，您概述的場景看起來類似於“注冊”模式，其中當一個孩子被實例化時，它告訴它的父母“嘿，我在這里，這是您需要的關於我的信息。”

在這種情況下有幾個合理的選擇：

1. 重新考慮子組件實際上是否應該擁有該數據。 我不懷疑您有充分的理由讓子組件擁有數據，但父組件已經負責決定渲染哪個子組件這一事實可能表明，包含要渲染的組件和相關文本的映射可能成為這個領域的一個很好的解決方案。 那將干凈利落地解決這個問題。

2. 鑒於根據您的描述，您目前確實希望避免讓父母擁有該數據，您還可以考慮讓孩子yield數據。 然而，這通常只有在它的 DOM 關系有意義時才有效。 如果是這樣，您可以選擇執行以下操作：

    {{yield (hash block='data' text=this.theText)}} <div class='the-component-body'> {{yield}} </div>

    <ChildComponent as |child|> {{#if (eq child.block 'data'}} <h2>{{child.text}}</h2> {{/if}} {{child}} </Child>

   （你可以在這里看到這個策略的工作——特別是，看到生成的 DOM！）

   雖然這非常強大，但它只有在您的 DOM 布局支持它時才有效。

3. 最后，也許最簡單的是對於您擁有的用例，您可以（雖然不一定是最好的，因為我認為上面的其他選項在可用時通常更好），您可以通過調用傳遞的操作來“注冊”組件的值在constructor期間進入您的組件。 現在，以這種方式使用組件的構造函數來處理組件行為可能是一個問題，因為它只運行一次，當組件第一次實例化時，Glimmer 和 Ember 保持組件實例穩定，並且隨着時間的推移只更改傳遞給它們的值盡可能，所以如果你傳遞回來的值取決於你傳遞給它的參數， constructor將不起作用。 如果它總是穩定的，不依賴於參數的組成部分，這樣做的工作，它通常適用於一個“注冊”的格局，其中，子組件只需要實例化時，一個單件的數據傳遞給家長。