javascript - Knockout.js - 跨 iframe 可观察绑定(bind)

Question

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

这是场景(简化):

1. 主窗口:包含 Knockout.js。 window.top.DATA是数据的全局容器，例如。 var DATA = { username: ko.observable('John') };
2. 模块 iframe 窗口:还包括 Knockout.js。 View 想要显示存储在 window.top.DATA 中的数据对象，使用代码:<div data-bind="text: window.top.DATA.username></div>

结果是什么？

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

原因

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

解决方案

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

解决该问题的另一种方法是简单地允许 knockout 识别它应该识别的 observables，这将允许 observables 跟踪依赖性、绑定(bind)值并正常工作。不幸的是，我预计这可能很难实现。您在这里看到哪些选项？

感谢您的所有回复。

编辑

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