Knockoutjs：将foreach中的动态iframe绑定到父对象

我正在尝试绑定iframe和父窗口，以便我可以更改/更新iframe或父窗口中的可观察对象，并且两个视图都将更新为新值

以下是工作示例：

我已经调整了我找到的一些示例代码，并使其运行良好，如下所示

ko.bindingHandlers.bindIframe = {
  init: function(element, valueAccessor) {
    function bindIframe() {
        try {
            var iframeInit = element.contentWindow.initChildFrame,
                iframedoc = element.contentDocument.body;
        } catch(e) {
            // ignored
        }
        if (iframeInit)
            iframeInit(ko, valueAccessor());
        else if (iframedoc){
            ko.applyBindings(valueAccessor(), iframedoc);
        }
    };
    bindIframe();
    ko.utils.registerEventHandler(element, 'load', bindIframe);
  }
};

function ViewModel() {
    var self = this;
    self.someProperty = ko.observable(123);

    self.clickMe = function(data, event) {
        self.someProperty(self.someProperty() + 1);
    }

    self.anotherObservableArray = ko.observableArray([
        { name: "Bungle", type: "Bear" },
        { name: "George", type: "Hippo" },
        { name: "Zippy", type: "Unknown" }
    ]);

    self.iframes = ko.observableArray([
        { src: "http://fiddle.jshell.net/zVPF8/6/show/", type: "Bear" },
        { src: "http://fiddle.jshell.net/zVPF8/6/show/", type: "Hippo" },
        { src: "http://fiddle.jshell.net/zVPF8/6/show/", type: "Unknown" }
    ]);
};

// Bind outer doc
ko.applyBindings(new ViewModel());

HTML:

这是我的Knockoutjs ViewModel代码

ko.bindingHandlers.bindIframe = {
  init: function(element, valueAccessor) {
    function bindIframe() {
        try {
            var iframeInit = element.contentWindow.initChildFrame,
                iframedoc = element.contentDocument.body;
        } catch(e) {
            // ignored
        }
        if (iframeInit)
            iframeInit(ko, valueAccessor());
        else if (iframedoc){
            ko.applyBindings(valueAccessor(), iframedoc);
        }
    };
    bindIframe();
    ko.utils.registerEventHandler(element, 'load', bindIframe);
  }
};

function ViewModel() {
    var self = this;
    self.someProperty = ko.observable(123);

    self.clickMe = function(data, event) {
        self.someProperty(self.someProperty() + 1);
    }

    self.anotherObservableArray = ko.observableArray([
        { name: "Bungle", type: "Bear" },
        { name: "George", type: "Hippo" },
        { name: "Zippy", type: "Unknown" }
    ]);

    self.iframes = ko.observableArray([
        { src: "http://fiddle.jshell.net/zVPF8/6/show/", type: "Bear" },
        { src: "http://fiddle.jshell.net/zVPF8/6/show/", type: "Hippo" },
        { src: "http://fiddle.jshell.net/zVPF8/6/show/", type: "Unknown" }
    ]);
};

// Bind outer doc
ko.applyBindings(new ViewModel());

请参阅foreach bind not working中单个iframe工作和动态iframe的示例

---

提前谢谢

在

foreach

绑定中，

$data

不同；它是数组中的当前项。您可以通过将

iframe

改为绑定到

$root

来修复示例

<iframe data-bind="attr: {src: src}, bindIframe: $root"></iframe>

---

在

foreach

绑定中，

$data

是不同的；它是数组中的当前项。您可以通过将

iframe

改为绑定到

$root

来修复示例

<iframe data-bind="attr: {src: src}, bindIframe: $root"></iframe>

---

好极了！！这正是我所缺少的，谢谢堆完美地工作！杰出的这正是我所缺少的，谢谢堆完美地工作！

<iframe data-bind="attr: {src: src}, bindIframe: $root"></iframe>