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.
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:
Horrible behavior, IE...
If anyone can come up with an actual explanation on WHY this was happening, I'll accept his answer instead.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With