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

Question

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

我的问题

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

我的尝试

下面是一个极其精简的准系统示例，使用 alert 代替我的脚本。期望的结果是在呈现 DOM 之后让这个 alert 出现，下面的例子让它在之前发出警报。

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

Answer 2

尽管创建子组件总是安全的，（如 ember 的 docs

中所述

When a view has children, didInsertElement will be called on the child view(s) first and on itself afterwards. )

，但是，即使没有子组件，didInsertElement hook 也会在组件被插入到DOM后触发。这是一个例子 twiddle.

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

EmberJS Component - Run custom function after DOM has fully loaded

javascript

ember.js

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

EmberJS Component - Run custom function after DOM has fully loaded

javascript

ember.js

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