Question

我想在交叉iframe绑定中使用knockout.js。 iframe的存在取决于我正在处理的实际应用程序结构。

这是一个场景（简化）：

主窗口：包含Knockout.js。 window.top.DATA是数据的全局容器，例如。 var DATA = { username: ko.observable('John') };
模块iframe窗口：还包括Knockout.js。 View想要使用代码window.top.DATA

<div data-bind="text: window.top.DATA.username></div>

结果是什么？

DIV的innerHTML包含ko.observable().toString()个内容，而不是John。

原因

Knockout.js无法识别在执行绑定时在父框架中创建的可观察对象，因为通过比较引用，knockout检查变量是否可通过ko.hasPrototype进行观察。由于父帧和子帧ko实例之间的原型不同，因此无法绑定值。

解决方案

最简单的解决方案是在脚本文件的顶部编写类似：window.ko = window.top.ko || setupKO()的内容。不幸的是，在这种情况下，像with: window.someLocalObj这样的绑定引用了window.top而不是window - 我们无法使用template绑定访问本地变量和本地模板。

解决问题的另一种方法是简单地允许knockout识别可观察的observables，允许observable跟踪依赖项，绑定值并且运行良好。不幸的是，我希望它可能很难实现。你在这看到什么选择？

感谢您的所有回复。

修改

Knockout.js版本：3.2.0。

Answer 1

一种解决方案是使用单个ko实例同时处理主窗口及其框架元素。 iframe可以访问window.frames[frame_index].document个元素：

  var DATA = { username: ko.observable('John') };

  ko.applyBindings(DATA);
  ko.applyBindings(DATA, window.frames[0].document.body);

工作示例： Plunker

Knockout.js - 交叉iframe可观察绑定

1 个答案: