KnockoutJS双重绑定小部件应用程序 [英] KnockoutJS double binding widget application

问题描述

我有一个场景，我已经开发了一个基于 widget的应用程序，该应用程序将其自身插入到一个消费应用程序的DOM中.该小部件使用KnockoutJS呈现其自己的UI，并进行绑定以实现其自己的ViewModel.

I have a scenario where I've developed a widget based application, which injects itself into the DOM of a consuming application. That widget uses KnockoutJS to render it's own UI, and it binds do it's own ViewModel.

正在使用的应用程序(可能不是我的)也使用KnockoutJS来使用完全不同的ViewModel呈现其自己的UI.

The consuming application (possibly not mine) also uses KnockoutJS to render it's own UI with a totally different ViewModel.

发生的事情是，消费页面加载并运行ko.applyBindings(hostPageViewModel).然后，该小部件将加载并运行ko.applyBindings(widgetDataViewModel).一旦执行了第二个applyBindings，消费页面将松开其绑定模型的上下文，并且不显示任何内容.在调试中，我可以看到在使用方应用程序上呈现的数据，然后被小部件应用程序擦除.

What happens is that the consuming page loads and runs ko.applyBindings(hostPageViewModel). Then the widget loads and runs ko.applyBindings(widgetDataViewModel). Once the second applyBindings is executed, the consuming page looses the context of it's bound model and displays nothing. In debug, I can see the data render on the consuming application, then get wiped by the widget application.

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

Other than trying to maintain two totally different instances of Knockout (not even sure if this is possible but I was thinking about newing the widget version and calling it kotwo), is there a solution for this?

由于这种设计的应用程序风格内的应用程序，我无法一次应用绑定.

I can not applyBindings only one time because of the application within an application style of this design.

如果有人有建议，我希望对此有所帮助.

I'd love some help with this one if anyone has suggestions.

推荐答案

我认为您需要将第二个Apply绑定的作用域限定为仅包含div的窗口小部件，该div仅在窗口小部件加载后才添加到DOM中，然后在之后添加到DOM中. 会叫您的第一个applyBindings.

I think you will need to scope your second apply bindings just to your widget containing div which is only added to the DOM after your widget loads and after your first applyBindings is called.

因此小部件会调用

ko.applyBindings(widgetViewModel, $widgetDiv);

这将阻止他们踩在彼此的脚趾上.

This will stop them treading on each others toes.

关于页面上有两个版本的KO，我不确定会带来什么后果.您可以测试ko对象，如果找不到，则动态包含文件?

As for having two versions of KO on the page, I'm not sure what the consequences are. Could you test for ko object and if not found include your files dynamically?

希望这会有所帮助.

这篇关于KnockoutJS双重绑定小部件应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！