[SOLVED] Parent-Child creation problem, metis-menu

In order to convert metis-menu to an aurelia component, we faced a problem in which we have to call .metisMenu() method of jquery in parent’s attached method, but it seems that when that called is executing the childs which are happen tbe in slot part of the parent are not created or attached yet to the DOM. What I want to know is that is there any way around to make sure that slot part of a parent is completed and then we go fo DOM manuplation?

https://github.com/shahabganji/aurelia-metis-menu-error

:point_up_2: that is a repository, trying to reproduce the situation.

I would be grateful, if anyone come up with some suggestions/resolution :pray:

There is nothing wrong with doing it in attached() callback, the slots are fullfilled before attached() was called.

The issue is you are using @containerless() on JQueryMetisMenu, which will essentially remove the wrapper DOM element where this.element suppose to be. Because of wrapper remover, this.element becomes a placeholder <!--anchor-->. You can inspect it in attached().

Easy solution is to use ref in html template

<ul class="metismenu" ref="metismenu">
    <slot></slot>
</ul>

Then

private attached() {
    $(this.metismenu).metisMenu();
}

private detached() {
    // dispose to avoid memory leak
    $(this.metismenu).metisMenu('dispose');
}
1 Like

Yes, I guess you’re right, I totally forgot using ref