title: Knockoutjs: manually bind specific dynamic iframe in foreach to parent
body: <p>I had a similar question at: <a href="https://stackoverflow.com/questions/20507736/knockoutjs-bind-dynamic-iframes-in-foreach-to-parent">Knockoutjs: bind dynamic iframes in foreach to parent</a>, that got answered but now I am trying to take this sample a bit further, working with ajax calls and loading async content within one of the iframes...</p>
  
  <p>I am trying to bind dynamically output iframes and parent window so that I can change/update an observable or observable array in either the iframe or parent window and both views will update with new value.</p>
  
  <p>You can see this working for all of the iframes except the first one at <a href="http://jsfiddle.net/NnT78/66/" rel="nofollow noreferrer">http://jsfiddle.net/NnT78/66/</a></p>
  
  <p>Here is my code</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;iframe data-bind="attr: {src: src, 'data-asyncload': async}, bindIframe: $root"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p><strong>KnockoutJS:</strong></p>
  
  <pre><code>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);
              }
          }
  };
  </code></pre>
  
  <p>The first iframe will have an async call that will load the content after the original binding above, that is why I am skipping binding this iframe above with:</p>
  
  <pre><code>if($(element).data("asyncload") == false) {
  </code></pre>
  
  <p>To bind the first iframe (after async call is finished and loaded content from data source) I want to call a function that binds that specific iframe with:</p>
  
  <pre><code>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);
      }
  });
  };
  </code></pre>
  
  <p>The bind in bindAsyncOnLoadCallback() does not seem to be binding to parent window, I think I have got this line wrong??</p>
  
  <pre><code>ko.applyBindings(new ViewModel(), iframedoc);
  </code></pre>
  
  <p>You can see working sample of all iframes except the first one binding to parent window at <a href="http://jsfiddle.net/NnT78/66/" rel="nofollow noreferrer">http://jsfiddle.net/NnT78/66/</a></p>
  
  <p>The reason I want to do this is that I have links in the async content that gets loaded onto the page and need to apply bindings after the ajax content is loaded</p>
  
  <p>Thanks in advance!!</p>