Ember.js 理解和使用Ember组件生命周期挂钩

Ember.js 理解和使用Ember组件生命周期挂钩,ember.js,Ember.js,我试图弄清楚为什么一个余烬组件不工作(并试图了解这个过程中的组件生命周期)。所讨论的组件是。它使用嵌套组件。可以有一个mapbox映射组件,在该组件中可以有几个mapbox标记组件。现在,它的工作原理是,mapbox映射组件初始化映射,然后将一个块传递给子标记组件。子标记组件然后引用传递给它们的映射。正在使用的组件示例(来自组件文档): 现在,使用didInsertElement钩子设置组件,这对我来说很有意义,因为在mapbox映射组件可以绑定到DOM中的元素之前,DOM需要就位。但它不是那样

我试图弄清楚为什么一个余烬组件不工作(并试图了解这个过程中的组件生命周期)。所讨论的组件是。它使用嵌套组件。可以有一个
mapbox映射
组件,在该组件中可以有几个
mapbox标记
组件。现在,它的工作原理是,
mapbox映射
组件初始化映射,然后将一个块传递给子标记组件。子标记组件然后引用传递给它们的映射。正在使用的组件示例(来自组件文档):

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

didInitAttrs
didReceiveAttrs
willRender
didInsertElement
didRender
现在,事情变得很奇怪。当我用
didInitAttrs
替换组件中的
didinertelement
时,它会按正确的顺序触发。父组件上的
didInitAttrs
钩子首先激发,然后是子组件
didInitAttrs
钩子。问题是DOM还没有准备好,所以它没有多大帮助。我也不能将映射绑定事件放在Ember runloop中,因为它需要返回并作为块传递给子元素

因此,我的问题是:

  • 为什么在组件上使用
    didInsertElement
    时,钩子会按顺序执行?(孩子,然后是父母)
  • 这个组件是如何以当前编写的方式工作的
  • 如果官方API文档中没有提到上述挂钩,我应该使用它们吗
  • 我已经在一个新版本中重新创建了插件。子钩子在父钩子之前被调用,导致组件中断,因为调用钩子时,
    map
    是未定义的。这发生在余烬1.13.8和1.13.9

    为什么在组件上使用didInsertElement时,钩子会 按他们的顺序执行?(孩子,然后是父母)

    这在版本1.8中进行了更改。它以前是父对象,然后是子对象,但这通常需要人们使用一些复杂的方法等待子对象渲染来完成某些事情。改变顺序使学习余烬变得更简单

    有关更多信息,请参阅

    这个组件是如何以当前编写的方式工作的

    我没有使用这个插件,也不知道它是否有效。不过,我已经帮你解决了工作中的麻烦:

    如果没有,我应该使用上面提到的钩子吗 在官方API文档中提到


    这些钩子没有被提及,因为文档仍在跟踪Ember中的更改。如果您愿意,可以随意使用。

    太棒了,谢谢!所以,只是为了确定;我在旋转中看到你在余烬中包裹了整个插入元素。这有效地逆转了1.8更改的效果,即包装的代码将放在工作队列的最后,在父组件之后运行?是的,它有效地使内部代码在父代码运行后的下一次运行循环调用中运行。
    didInitAttrs
    didReceiveAttrs
    willRender
    didInsertElement
    didRender