Knockoutjs：绑定到父项的foreach中的动态iframes

Question

我试图绑定iframe和父窗口，以便我可以在iframe或父窗口中更改/更新observable，并且两个视图都将使用新值更新。

这里是工作示例：http://jsfiddle.net/NnT78/26/

我已经调整了，我发现有它伟大的工作如下一些示例代码;

HTML：

<iframe src="http://fiddle.jshell.net/zVPF8/11/show/" data-bind="bindIframe: $data"></iframe> 

但是，当我把同样的html在foreach绑定它得到一个错误;

HTML：

<ul data-bind="foreach: iframes"> 
    <li> 
     <iframe data-bind="attr: {src: src}, bindIframe: $data"></iframe> 
    </li> 
</ul> 

错误：

Uncaught ReferenceError: Unable to parse bindings. 
Bindings value: text: someProperty 
Message: someProperty is not defined 

这里是我的Knockoutjs视图模型的代码;

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绑定单iframe中的工作和动态I帧不工作的样品见http://jsfiddle.net/NnT78/26/。

提前致谢！

Answer 1

当在foreach绑定，$data是不同的;它是数组中的当前项目。您可以修改示例，方法是更改​​iframe以代替绑定到$root。

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

http://jsfiddle.net/mbest/NnT78/29/