KnockoutJS双绑定小部件应用程序

Question

我有一个场景，我开发了一个基于小部件的应用程序，它将自己注入消费应用程序的DOM中。该小部件使用KnockoutJS来呈现它自己的UI，它绑定它自己的ViewModel。

消费应用程序（可能不是我的）也使用KnockoutJS来呈现它自己的用完全不同的ViewModel的UI。

消费页面加载并运行ko.applyBindings（hostPageViewModel）会发生什么。然后，窗口小部件加载并运行ko.applyBindings（widgetDataViewModel）。执行第二个applyBindings后，使用页面将丢失其绑定模型的上下文并且不显示任何内容。在调试中，我可以在使用的应用程序上看到数据呈现，然后被小部件应用程序擦除。

除了尝试维护两个完全不同的Knockout实例（甚至不确定这是否可行，但我正在考虑修改小部件版本并将其称为kotwo），是否有解决方案？

由于此设计的应用程序样式中的应用程序，我无法仅应用一次绑定。

如果有人有建议，我会喜欢这个帮助。

Answer 1

我认为您需要将第二个应用绑定范围仅限于包含div的窗口小部件，该窗口小部件仅在窗口小部件加载后添加到DOM，而在第一个applyBindings被调用之后。

因此小部件会调用

ko.applyBindings(widgetViewModel, $widgetDiv);

这会阻止他们踩到彼此的脚趾。

至于在页面上有两个版本的KO，我不确定后果是什么。你能测试ko对象，如果没有找到动态包含你的文件吗？

希望这有帮助。