什么是'didInsertElement'的Ember Octane替代品？

如何解决什么是'didInsertElement'的Ember Octane替代品？

我正在尝试触发从父组件传递来的回调。我们处理该问题的旧模式是在didInsertElement中调用该函数。在Octane中，我看到我们可以使用did-insert修饰符，但是在此用例中似乎很奇怪，因为我们没有更新用于调用did-insert的DOM元素。我还看到在某些情况下使用了onRender，但我没有看到有关该文件的文档，而且对我来说也没有用。有什么建议吗？

对于此特定用例，我们有一个父组件，该父组件可以具有许多子组件之一。对于每个子组件，我们都有特定的文本显示在父组件中，我们希望子组件成为该文本的所有者。

解决方法

您认为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>
   

   （您可以看到此策略有效here，尤其是看到生成的DOM！）

   虽然功能非常强大，但再次说明，只有在您的DOM布局支持它的情况下，它才起作用。

3. 最后，也许是大多数简单，对于您的用例，您可以（尽管不一定是 best ，因为我认为上述其他选项通常是更好（如果有），您可以通过调用在constructor期间传递给您组件的操作来“注册”该组件的值。现在，以这种方式使用组件的构造函数进行组件行为可能会成为一个问题，因为当首次实例化该组件时，它仅运行一次 ，并且Glimmer和Ember保持组件实例稳定并仅更改值传递给它们的时间越长越好，因此，如果要传递回的值取决于传递给它的参数，则constructor将不起作用。如果它始终稳定并且不依赖于组件的参数，则此起作用，并且通常适用于“注册”模式，子组件只需要在实例化时将单个数据传递给父级。