EmberJS組件-在DOM完全加載后運行自定義函數

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的文檔中所述

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

，但是，即使沒有子組件，didInsertElement掛鈎也只會在將組件插入DOM之后觸發。 下面是一個例子擺弄 。