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/