EmberJS Component - Run custom function after DOM has fully loaded

Question

I'm struggling to fully grasp the component lifecycle. I've created a component, but I need my custom javascript function to run after the DOM is complete. I've scoured through the EmberJS Docs and Stackoverflow, but any documentation I come across doesn't work as I intended.

My Issue

I've attempted to use didInsertElement and didRender, but they still get called before my repeating elements have loaded in the DOM. How do I circumvent this to have my Javascript run after the DOM has fully rendered.

My Attempts

Below is an extremely stripped down and barebones example using an alert in place of my script. The desired outcome is to have this alert appear after the DOM is rendered, the below examples have it alert before.

import Component from '@ember/component';

export default Component.extend({

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

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

Thanks in advance.

The component is adding an image gallery using a json feed. This list of elements is being generated in a repeater. {{#each foo as |bar|}}<li></li>{{/each}} — slappingkeys
– slappingkeys, Commented Nov 28, 2018 at 16:48
so you want to run code exactly when all of those finish? I think you could do it by wrapping your each block in a component, and using the didRender / didInsertElement in there — NullVoxPopuli
– NullVoxPopuli, Commented Nov 28, 2018 at 17:24
The each block is already in a components .hbs, that's why the confusion has ensued. From everything i read it should render my function "after" the DOM has been created, it is not doing that. In theory, i'd expect either of these to work as componentDidMount() {} does in React. — slappingkeys
– slappingkeys, Commented Nov 28, 2018 at 17:40
it does work like componentDidMount in React. I'll explain in an answer, one sec — NullVoxPopuli
– NullVoxPopuli, Commented Nov 28, 2018 at 17:48

NullVoxPopuli · Accepted Answer · 2018-11-28 18:18:48Z

1

Assuming you have the following template

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

You want to know when the the list is done rendering?

extract the above template into a component.

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

where ItemList is defined as

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

Here is the code:

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

If you open the console, you'll see:

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

edited Nov 28, 2018 at 18:18

answered Nov 28, 2018 at 18:02

NullVoxPopuli

65.6k76 gold badges216 silver badges364 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

escapeVelocity · Accepted Answer · 2018-11-28 19:08:57Z

0

Although creating a child component is always safe, ( as said in ember's docs

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

, however, even without child components, the didInsertElement hook will trigger only after the component is inserted to DOM. Here is an example twiddle.

answered Nov 28, 2018 at 19:08

escapeVelocity

16615 bronze badges

Collectives™ on Stack Overflow

EmberJS Component - Run custom function after DOM has fully loaded

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related