javascript - EmberJS 组件 - DOM 完全加载后运行自定义函数

Question

我正在努力完全掌握组件生命周期。我已经创建了一个组件，但我需要自定义 javascript 函数在 DOM 完成后运行。我已经浏览了 EmberJS 文档和 Stackoverflow，但我遇到的任何文档都无法按我的预期工作。

我的问题

我尝试使用 didInsertElement 和 didRender，但在我的重复元素加载到 DOM 中之前它们仍然会被调用。我如何规避这个问题，以便在 DOM 完全渲染后运行我的 Javascript。

我的尝试

下面是一个极其精简且简单的示例，使用 alert 代替我的脚本。期望的结果是在 DOM 渲染之后出现此警报，下面的示例在此之前出现警报。

import Component from '@ember/component';

export default Component.extend({

     didRender() {
        alert('didRender');
     },

     didInsertElement() {
        alert('didInsertElement');
     }
});

提前致谢。

Answer 1

假设您有以下模板

{{#each this.items as |item|}}
  <ItemComponent @item={{item}} />
{{/each}}

您想知道列表何时完成渲染吗？

将上述模板提取到组件中。

<ItemList @items={{this.items}} />

其中 ItemList 定义为

import Component from '@ember/component';
export default class ItemList extends {
  didInsertElement() {
    console.log('list was inserted'); 
  }
}

代码如下:

https://canary.ember-twiddle.com/6e023f1413fbce6bab8954f3eec73554?openFiles=templates.components.item-list.hbs%2Ctemplates.components.item-component.hbs

如果您打开控制台，您将看到:

item 1 was inserted
item 2 was inserted
item 3 was inserted
item 4 was inserted
item 5 was inserted
list was inserted