Knockoutjs：手动绑定特定的动态iframe在foreach到父

Question

我有一个类似的问题：Knockoutjs: bind dynamic iframes in foreach to parent，得到了回答，但现在我试图进一步采取这个示例，使用ajax调用和加载异步内容之一的内嵌框架...

我想动态地输出iframes和父窗口，以便我可以更改/更新iframe或父窗口中的observable或observable数组，并且这两个视图将使用新值更新。

你可以看到这方面的工作对所有除了第一个I帧的http://jsfiddle.net/NnT78/66/

这里是我的代码

HTML：

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

KnockoutJS：

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

      if($(element).data("asyncload") == false) { 
       bindIframe(); 
       ko.utils.registerEventHandler(element, 'load', bindIframe); 
      } 
     } 
}; 

第一个iframe中都会有一个异步调用后，上述原稿装订将加载的内容，这就是为什么我与跳绳结合此iframe上面：

if($(element).data("asyncload") == false) { 

要绑定第一个iframe中（后异步调用从数据源完成，加载的内容）我想打电话结合特定的iframe与功能：

function bindAsyncOnLoadCallback() { 
    $("iframe[data-asyncload='true']").each(function() { 
    try { 
     var iframeInit = this.contentWindow.initChildFrame, 
      iframedoc = this.contentDocument.body; 
    } catch (e) { 
     // ignored 
    } 
    if (iframeInit) 
     iframeInit(ko, new ViewModel()); 
    else if (iframedoc) { 
     ko.applyBindings(new ViewModel(), iframedoc); 
    } 
}); 
}; 

在bindAsyncOnLoadCallback（）绑定似乎并没有被绑定到父窗口，我觉得我有这个行错了？

ko.applyBindings(new ViewModel(), iframedoc); 

你可以看到所有的I帧的工作样本除了第一个在http://jsfiddle.net/NnT78/66/

我想这样做的原因，结合父窗口的是，我有被加载到在异步内容链接页面，并需要在加载ajax内容后应用绑定

在此先感谢！

Answer 1

我得到了这个工作！这里是工作示例：http://jsfiddle.net/myq8e/48/

的问题是，我不得不在全球范围内的变量声明ViewModel()，所以我可以用它在异步回调函数：

var viewModel = new ViewModel(); 

然后为父母申请绑定时使用viewModel窗口：

ko.applyBindings(viewModel); 

而对于异步I帧：

function bindAsyncOnLoadCallback() { 
    $("iframe[data-asyncload='true']").each(function() { 
     try { 
      var iframeInit = this.contentWindow.initChildFrame, 
       iframedoc = this.contentDocument.body; 
     } catch (e) { 
      // ignored 
     } 
     if (iframeInit) 
      iframeInit(ko, viewModel); 
     else if (iframedoc) { 
      ko.applyBindings(viewModel, iframedoc); 
     } 
    }); 
}