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

【问题标题】：EmberJS Component - Run custom function after DOM has fully loadedEmberJS 组件 - 在 DOM 完全加载后运行自定义函数
【发布时间】：2018-11-29 03:08:57
【问题描述】：

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

我的问题

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

我的尝试

下面是一个非常精简的准系统示例，使用alert 代替我的脚本。期望的结果是在渲染 DOM 之后让这个 alert 出现，下面的示例在它之前有警报。

import Component from '@ember/component';

export default Component.extend({

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

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

提前致谢。

【问题讨论】：

“重复元素”是什么意思？
组件正在使用 json 提要添加图片库。此元素列表正在转发器中生成。 {{#each foo as |bar|}}
{{/each}}

【解决方案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

【讨论】：