Question

我正在努力完全掌握组件的生命周期。我已经创建了一个组件，但是我需要自定义javascript函数才能在DOM完成后运行。我已经遍历了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');
     }
});

谢谢。

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. ）

，但是，即使没有子组件，仅在将组件插入DOM之后，didInsertElement钩子才会触发。这是一个示例twiddle。

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

2 个答案: