ember.js - 理解和使用 Ember 组件生命周期钩子(Hook)

Question

我正在尝试找出 Ember 组件无法正常工作的原因(并尝试了解流程中的组件生命周期)。有问题的组件是 Ember-cli-mapbox .它使用嵌套组件。您可以拥有一个 mapbox-map 组件，并且在该组件内您可以拥有多个 mapbox-marker 组件。现在，它应该如何工作，是 mapbox-map 组件初始化 map ，然后将一个 block 传递给子标记组件。然后子标记组件引用传递给它们的 map 。使用中的组件示例(来自组件文档):

{{#mapbox-map mapId='ember-cli-mapbox.7c3914f2' as |map|}}
  {{#each positions as |position|}}
    {{mapbox-marker map=map coordinates=position.coordinates}}
  {{/each}}
{{/mapbox-map}}

现在，使用 didInsertElement Hook 设置组件，这对我来说很有意义，因为 DOM 需要在 mapbox-map 组件可以绑定(bind)之前就位到dom中的一个元素。它不是那样工作的。子组件的 didInsertElement 在父组件的 didInsertElement 钩子(Hook)之前执行。因此，标记会尝试在创建之前引用 map 。我通过将 console.log 放在组件初始化代码中来解决这个问题。我找不到太多关于组件生命周期的文档。 didInsertElement 确实在 API 文档中被引用 here ，但似乎最新的 API 文档实际上已经过时并且没有引用描述的一堆其他 Hook here .后一个链接表示生命周期事件按以下顺序发生:

didInitAttrs
didReceiveAttrs
willRender
didInsertElement
didRender

现在，事情变得奇怪了。当我用 didInitAttrs 替换组件中的 didInsertElement 时，它会以正确的顺序触发。父组件上的 didInitAttrs Hook 首先触发，然后是子组件 didInitAttrs Hook 。问题是，DOM 还没有准备好，所以它没有多大帮助。我也不能将 map 绑定(bind)事件放在 Ember runloop 中，因为它需要返回并作为一个 block 传递给子元素。

所以，我的问题是:

1. 为什么在组件上使用 didInsertElement 时， Hook 会按照它们执行的顺序执行？ ( child ，然后是 parent )
2. 这个组件是如何按照当前编写的方式工作的？
3. 如果官方 API 文档中没有提及，我是否应该使用上述 Hook ？

我在 Ember Twiddle here 中重新创建了插件.子 Hook 在父 Hook 之前被调用，导致组件中断，因为 map 在调用 Hook 时未定义。这发生在 Ember 1.13.8 和 1.13.9 上。

Answer 1

Why, when using didInsertElement on components, do the hooks get executed in the order they do? (children, then parents)

这在 1.8 版中已更改。以前是 parent ，然后是 child ，但这通常需要人们使用一些复杂的方法来等待 child 渲染来做某些事情。改变顺序让学习 Ember 变得更简单。

参见 https://github.com/emberjs/ember.js/issues/5631获取更多信息。

How did this component ever work in the way it's currently written?

我没有使用过这个插件，不知道它是否有效。我修复了你的旋转工作，但是:http://ember-twiddle.com/4c3e55d0a66ead378bdf

Am I supposed to use the above mentioned hooks if they're not mentioned in the official API docs?

这些钩子(Hook)没有被提及，因为文档仍在 catch Ember 的变化。如果您愿意，请随意使用它们。