Defer component lifecycle

Help Requests
1

Hi folks,

I’m creating Uikit bindings for Aurelia, and I have a pretty common pattern that’s currently stumping me. For example, I have a navigation component that can be attached to a panel component. In a certain configuration, the navigation component pops out a drawer containing a panel that’s defined in the navigation component along the lines of:

        div(slot="right")
        aire-navbar(light small rotate right target.bind="drawer")
            aire-panel
                aire-header
                    i.fal.fa-code-merge
                    h1 hello

            aire-panel
                aire-header
                    i.fal.fa-palette
                    span Palettes
                aire-body

            aire-panel(click.trigger="show()" active="true")
                aire-header
                    i.fal.fa-brackets-curly
                    span Generated
            aire-panel
                aire-header
                    i.fal.fa-code-merge
                    span History


            aire-drawer(
                ref="drawer"
                host="ancestor:nav"
                visible.bind="drawerOpen"
                opens="left" width="400"
            )

Which generates something that looks like:

side-nav
side-nav283×810 13.5 KB

What I would like to do is

1.) generate the navbar button from the header element (working, but probably not ideal at https://github.com/sunshower-io/aire/tree/components/container/src/main/nav)
2.) defer the lifecycle for the subcomponent (in this case, aire-panel) until it’s activated by someone clicking its corresponding button in the menu. Ideally, I would like to remove and add the panel to the DOM only when it’s active.

Any help would be greatly appreciated!

Josiah

1 Like
2

For question number 2, to only render the component when it’s active. Not sure if this is what you want but shouldn’t a simple if.bind=“panel.isActive” suffice?
This way the aire-panel will only be renderend if it’s property “isActive” is true, which you can set via an (click) event or something.

Not sure if this is what you we’re looking for, might be better ways. It’s just an idea :blush:

1 Like
3

Thanks for the response! The issue with if.bind is that I need a portion of the panel’s DOM to lay out the menu, and I’m not sure the best way to access that. If I use show.bind, then the panel gets laid out and the actual HTML is generated. I would prefer to delay any rendering of the panel until it’s inserted into the drawer.

1 Like
4

Hi,

maybe use CompositionTransaction for delaying the rendering?

2 Likes
5

Every composition transaction will allow you to defer only once, which means it’s not easy to defer lifecycle of subtree at a later point rather than start up at the moment. You will need to combine compose + locally registered composition transaction to achieve that

1 Like