KnockoutJS 双绑定小部件应用答案

【问题标题】：KnockoutJS double binding widget applicationKnockoutJS 双绑定小部件应用
【发布时间】：2012-04-01 13:12:50
【问题描述】：

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

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

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

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

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

如果有人有任何建议，我很乐意为此提供一些帮助。

【问题讨论】：

我刚刚发现了这个我不知道存在的 [stackoverflow.com/questions/7342814/…。听起来您可以确定绑定的范围，但我不确定这是否可行。似乎没有这方面的文档。我会说小部件应用程序可以从它的根目录下应用绑定，并与任何消费应用程序完全隔离，如果这可行的话。
好的，别管我的问题。 KnockoutJS 的 rootnode 功能完全符合我的需要。这些家伙有什么没有想到的吗？我需要一份与 Knockout 团队合作的工作……太棒了！
您能否将您如何解决问题作为问题发布，以便其他用户得到正确引导。
你基本上写了我说的，所以你得到了解决方案的功劳:)。

标签： javascript knockout.js

【解决方案1】：

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

所以小部件会调用

ko.applyBindings(widgetViewModel, $widgetDiv);

这将阻止他们互相践踏。

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

希望这会有所帮助。

【讨论】：

我正计划使用一个版本的 KO...仅在需要时才实例化它。神奇之处在于我不知道存在的那个额外的 rootnode 参数。