Double KnockoutJS widget app

Question

I have a scenario in which I developed a widget-based application that is embedded in the application DOM . This widget uses KnockoutJS to display its own user interface, and it associates it with the ViewModel.

The consuming application (perhaps not mine) also uses KnockoutJS to render its own user interface with a completely different ViewModel.

It happens that the loaded page loads and starts ko.applyBindings (hostPageViewModel). Then the widget loads and launches ko.applyBindings (widgetDataViewModel). After executing the second applyBindings, the consumer page loses the context of the model associated with it and displays nothing. In the debug state, I see the data visualization in the consumer application, and then cleared by the widget application.

Besides trying to save two completely different instances of Knockout (not even sure if this is possible, but I was thinking about updating the version of the widget and calling it kotwo), is there a solution for this?

I cannot apply Bindings only once because of the application-style application of this design.

I would really like to help with this if anyone has any suggestions.

Answer 1

I think you will need to cover your second bindings only with your widget containing the div, which is added only to the DOM after loading the widget and after . The first applyBindings . p>

So the widget called

 ko.applyBindings(widgetViewModel, $widgetDiv); 

This will stop them stepping on each other.

As for having two versions of KO per page, I'm not sure what the consequences are. Could you check the ko object and if you didn’t find it, include your files dynamically?

Hope this helps.