|
@@ -36,12 +36,17 @@ ko.bindingHandlers.reactWrapper = (() => {
|
|
|
const props = getProps(allBindings);
|
|
const props = getProps(allBindings);
|
|
|
|
|
|
|
|
// The component's react root should only be created once per DOM
|
|
// The component's react root should only be created once per DOM
|
|
|
- // load so we pass it along via the bindingContext to be reused in the
|
|
|
|
|
|
|
+ // load so we pass it along via the bindingContext to be reused in the KO update call.
|
|
|
const reactRoot = createRoot(el);
|
|
const reactRoot = createRoot(el);
|
|
|
el.__KO_React_root = reactRoot;
|
|
el.__KO_React_root = reactRoot;
|
|
|
loadComponent(componentName).then(Component => {
|
|
loadComponent(componentName).then(Component => {
|
|
|
reactRoot.render(createElement(Component, props));
|
|
reactRoot.render(createElement(Component, props));
|
|
|
});
|
|
});
|
|
|
|
|
+
|
|
|
|
|
+ // Since the react component is a root component we need to handle the
|
|
|
|
|
+ // unmounting explicitly if the dom node is disposed by Knockout, e.g. via "ko if:"
|
|
|
|
|
+ ko.utils.domNodeDisposal.addDisposeCallback(el, () => reactRoot.unmount());
|
|
|
|
|
+
|
|
|
// Tell Knockout that it does not need to update the children
|
|
// Tell Knockout that it does not need to update the children
|
|
|
// of this component, since that is now handled by React
|
|
// of this component, since that is now handled by React
|
|
|
return { controlsDescendantBindings: true };
|
|
return { controlsDescendantBindings: true };
|