answered
2023-11-20 16:25:12 +0800
MDuchemin 2480 ● 1 ● 6
Hey there,
If you are using wiring with shadow elements, one big thing that might be going wrong is timing.
See sample below which separates each phase as an example:
https://zkfiddle.org/sample/4bphu4/2-view-model-selection
In order for Selectors.wireComponents
to work, the component has to already exist in the component tree.
However, shadow elements recreate their content during the binding phase, which occurs AFTER the command / after compose phase.
As a result, when you call the Selectors.wireComponents
during afterCompose
, the shadow component itself exist (it's part of the composition phase), but it has not created its content yet (which it does during binding phase)
In addition, if you have already bound components and you trigger a notification which causes the shadow component parent to redraw, this will also nullifiy the wiring, because component retrieved from the first binding is no longer part of the page.
Instead, a new component is created by the shadow component, and you would need to rewire THAT one.
Here's a sequence you can try with the sample above:
- load page, click on "show component" <- this returns nothing, because afterCompose was execute before the textbox was initialized during binding phase.
- click on "rewire", click on "show component" <- this returns the current textbox, because wiring has happened AFTER the textbox was created.
- click on "update", click on "show component" <- this returns the OLD textbox (which is now nulled), instead of returning the new textbox created by the update to the apply's bound value
- click on "rewire", click on "show component" <- this return the new textbox (same idea as 2nd step)
With all of that said, what is your higher level requirement? (why do you need to wire a component in a VM?)
In the MVVM pattern, there might be different approach to do the type of operation which you are trying to achieve, which doesn't require direct component access.
For example, using the shadow component apply, you can trigger the template to recreate itself with different parameters, if your goal is to perform updates.
And if your requirement absolutely require direct component access, there are ways to insert a smaller MVC patterned template inside of a larger MVVM page, but the specifics would depend on what you are trying to achieve.