Knockout.js - 交叉iframe可觀察綁定

我想在交叉iframe綁定中使用knockout.js。 iframes的存在取決於我正在處理的實際應用程序結構。Knockout.js - 交叉iframe可觀察綁定

這是場景（簡化）：

主窗口：Knockout.js包括在內。 window.top.DATA是一個全球性的數據容器，例如。 var DATA = { username: ko.observable('John') };
模塊iframe窗口：Knockout.js也包括在內。查看想要做存儲在window.top.DATA對象顯示數據，使用代碼：<div data-bind="text: window.top.DATA.username></div>

結果是什麼？

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

原因

Knockout.js不能識別在父幀創建的，同時執行結合可觀察到的，因爲敲除檢查變量是通過比較參考與ko.hasPrototype觀察到。由於父級和子級框架ko實例中的原型不同，因此不可能綁定值。在腳本文件的開頭window.ko = window.top.ko || setupKO()：

解決方案

最簡單的解決辦法是寫的東西等。不幸的是，在這種情況下，綁定像with: window.someLocalObj引用window.top而不是window - 我們無法訪問本地變量，也無法使用template綁定本地模板。

解決這個問題的另一種方法是簡單地允許knockout識別observables，因爲它應該允許observables跟蹤依賴關係，綁定值並且工作正常。不幸的是，我希望這可能是一件很難實現的事情。你在這裏看到了什麼選擇？

謝謝你的回覆。

編輯

Knockout.js版本：3.2.0。

來源

2014-11-20 Simon

我已經打了這個自己在淘汰賽。你使用什麼版本？我認爲3中有一個bug使得這不起作用，而2。 – 2014-11-20 22:12:22

如果你做window.top.DATA.username（） – Shiala 2014-11-20 22:20:04

@Shiala手動評估可觀察值使得值可見，但改變window.top.DATA.username的值不會填充HTML中的改變。看起來淘汰賽不贊成觀察，因爲認識到這是可觀察的問題。 – Simon 2014-11-20 22:44:23

一個解決方案是使用單個的ko實例來同時處理主窗口及其框架元素。 iframe元素通過window.frames[frame_index].document是acessible：

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

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

工作例如：Plunker

來源

2014-11-21 15:30:35 manji

謝謝。不幸的是，從window.top應用綁定使得很難直接從視圖模板訪問任何iframe變量。當視圖在窗口之間分開時，似乎沒有簡單的方法來解決這個問題。因此，最好的解決方案將是重建應用程序的淘汰賽的一部分，並使其能夠在主窗口中工作。由於圖書館的建造。幸運的是，這是可能的。 – Simon 2014-11-23 11:18:46

Knockout.js - 交叉iframe可觀察綁定

回答

相關問題