CODEWITHSUNDEEP
javascriptinternet-explorerknockout.js
TDaver
TDaver

Reputation: 7264

IE 10 + KnockoutJS = HierarchyRequestError?

I've simplified my problem as much as possible. It only happens in Internet Explorer (9 and 10 confirmed). I have a page rendered with this:

<html>
<body>

    <span data-bind="text:$data[0].Mileage"></span>
    <script type="text/javascript">
        window.initChild = function (ko, viewModel) {
            window.ko = ko;
            ko.applyBindings(viewModel, document.body);
        }
    </script>
</body>
</html>

My SPA calls 

    var otherWindow = window.open('myurl', '_blank');
    var handler = function () {
        otherWindow.initChild(ko, report);
    };
    if (otherWindow.addEventListener) {
        otherWindow.addEventListener('load', handler, false);
    } else if (otherWindow.attachEvent) {
        otherWindow.attachEvent('onload', handler);
    }

I checked, the data arrives in the initChild method allright.

If I bind ANYTHING on the page, I get a HierarchyRequestError on the applyBindings call. My google-fu completely abandoned me on this, I'm completely clueless what's wrong.

Upvotes: 6

Views: 793

Answers (1)

TDaver
TDaver

Reputation: 7264

As far as I can tell, it was a symptom of this problem: Using Javascript objects across separate windows in IE

basically, no matter HOW I passed the ko object to the child window, something got lost, and when I tried applying bindings, ko itself ran onto a DOM tracking error, and tried to insert something to somewhere it shouldn't have (possibly part of the parent DOM to the child DOM).

The solution was two-fold:

  • Add the ko (and ko.mapping) scripts to the child window, to have it's own ko object
  • serialize the model with ko.mapping to JSON, pass the string to the child window and deserialize it.

Horrible behavior, IE...

If anyone can come up with an actual explanation on WHY this was happening, I'll accept his answer instead.

Upvotes: 3

Related Questions