Attached and repeat.for lifecycle

Help Requests
1

So i’m trying to get my head around when attached() gets called if there’s a repeater in the template.

E.g.

<div class="parent">
     <p repeat.for="thing of things">${thing}</p>
</div>

Now in attached:

attached() {
    const parent = document.querySelector('.parent');
    console.log(parent.offsetWidth);
}

Width will always be 0. If i wrap it in a setTimeout of 0 seconds then it’ll be the correct width.

Is there a way to make sure the repeated elements have rendered fully before any functions in attached() run?

2

This is a common issue in current Aurelia, parent element attached is called before child element attached. So in your container element attached, those repeat child elements were not yet populated. setTimeout is the way to fix that.

In Aurelia vNext, Rob changed the design of lifecycle callbacks, there are attaching and attached callbacks. The new attached will work as expected, parent element attached is called after child element attached.

1 Like
3

Ok. I’ve used setTimeout before but wanted to make sure there wasn’t an official way. :slight_smile:

Thanks.