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
that is a repository, trying to reproduce the situation.
I would be grateful, if anyone come up with some suggestions/resolution
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