`didInsertElement` 的 Ember Octane 替代品是什么?
What is the Ember Octane replacement for `didInsertElement`?
我正在尝试触发从父组件向下传递的回调。我们处理这个问题的旧模式是调用 didInsertElement 中的函数。在 Octane 中,我看到我们可以使用 did-insert
修饰符,但对于这个用例来说这似乎很奇怪,因为我们没有更新我们用来调用 did-insert 的 DOM 元素。我还看到 onRender
在一些情况下被使用,但我没有看到这方面的文档并且它没有为我开火。有什么建议吗?
对于这个特定的用例,我们有一个父组件,它可以有许多子组件之一。对于每个子组件,我们都有特定的文本显示在父组件中,我们希望子组件成为该文本的所有者。
你的直觉认为 did-insert
不是这里的正确解决方案,我认为是正确的。通常,修饰符只应在它们将要附加到的元素以某种方式使用时使用——也就是说,用于管理与 DOM 的交互。一般来说,我们 更喜欢 one-way 其他数据流。但是,您概述的场景看起来类似于“注册”模式,当 child 被实例化时,它会告诉它 parent “嘿,我在这里,这是您需要的信息我。”
在这种情况下有几个合理的选择:
重新考虑 child 组件 是否应该 实际上拥有该数据。我不怀疑你有充分的理由让 child 组件拥有数据,但 parent 已经负责决定要呈现哪个 child 这一事实可能表明映射其中包括要呈现的组件和关联的文本可能是这个 space 中的一个很好的解决方案。这样就彻底解决了这个问题。
根据您的描述,您目前 想要避免让 parent 拥有该数据,您也可以考虑让 child 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 布局支持它时才有效。
最后,也许大多数 简单地 对于您的用例,您可以(尽管不一定 最好 ,因为我认为上面的其他选项通常 更好 可用时),您可以 'register' 通过在 [=14] =].现在,以这种方式为组件行为使用组件的构造函数可能会出现问题,因为它 仅 运行一次,当组件首次实例化时,Glimmer 和 Ember 保留组件实例稳定并且随着时间的推移尽可能多地改变传递给它们的值,所以如果你传递回来的值取决于你传递给它的参数,constructor
将不起作用。如果它始终稳定并且 不 取决于组件的参数,则此 确实 有效,并且通常适用于 'registration'模式,其中 child 组件只需要在实例化时将单个数据传递给 parent。
我正在尝试触发从父组件向下传递的回调。我们处理这个问题的旧模式是调用 didInsertElement 中的函数。在 Octane 中,我看到我们可以使用 did-insert
修饰符,但对于这个用例来说这似乎很奇怪,因为我们没有更新我们用来调用 did-insert 的 DOM 元素。我还看到 onRender
在一些情况下被使用,但我没有看到这方面的文档并且它没有为我开火。有什么建议吗?
对于这个特定的用例,我们有一个父组件,它可以有许多子组件之一。对于每个子组件,我们都有特定的文本显示在父组件中,我们希望子组件成为该文本的所有者。
你的直觉认为 did-insert
不是这里的正确解决方案,我认为是正确的。通常,修饰符只应在它们将要附加到的元素以某种方式使用时使用——也就是说,用于管理与 DOM 的交互。一般来说,我们 更喜欢 one-way 其他数据流。但是,您概述的场景看起来类似于“注册”模式,当 child 被实例化时,它会告诉它 parent “嘿,我在这里,这是您需要的信息我。”
在这种情况下有几个合理的选择:
重新考虑 child 组件 是否应该 实际上拥有该数据。我不怀疑你有充分的理由让 child 组件拥有数据,但 parent 已经负责决定要呈现哪个 child 这一事实可能表明映射其中包括要呈现的组件和关联的文本可能是这个 space 中的一个很好的解决方案。这样就彻底解决了这个问题。
根据您的描述,您目前 想要避免让 parent 拥有该数据,您也可以考虑让 child
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 布局支持它时才有效。
最后,也许大多数 简单地 对于您的用例,您可以(尽管不一定 最好 ,因为我认为上面的其他选项通常 更好 可用时),您可以 'register' 通过在 [=14] =].现在,以这种方式为组件行为使用组件的构造函数可能会出现问题,因为它 仅 运行一次,当组件首次实例化时,Glimmer 和 Ember 保留组件实例稳定并且随着时间的推移尽可能多地改变传递给它们的值,所以如果你传递回来的值取决于你传递给它的参数,
constructor
将不起作用。如果它始终稳定并且 不 取决于组件的参数,则此 确实 有效,并且通常适用于 'registration'模式,其中 child 组件只需要在实例化时将单个数据传递给 parent。