javascript - KnockoutJS 双绑定(bind)小部件应用程序

Question

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

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

发生的是消费页面加载并运行 ko.applyBindings(hostPageViewModel)。然后小部件加载并运行 ko.applyBindings(widgetDataViewModel)。一旦执行了第二个 applyBindings，消费页面就会失去其绑定(bind)模型的上下文并且什么也不显示。在调试中，我可以看到数据在消费应用程序上呈现，然后被小部件应用程序删除。

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

由于这种设计的应用程序样式中的应用程序，我不能只应用一次绑定(bind)。

如果有人有建议，我很乐意在这方面提供一些帮助。

Answer 1

我认为您需要将第二个应用绑定(bind)的范围限定在包含 div 的小部件上，它仅在您的小部件加载之后和之后您的第一个 applyBindings 添加到 DOM被称为。

所以小部件会调用

ko.applyBindings(widgetViewModel, $widgetDiv);

这将阻止他们踩到对方的脚趾。

至于页面上有两个版本的KO，不知道会有什么后果。您能否测试 ko 对象，如果找不到则动态包含您的文件？

希望这对您有所帮助。