Ok.. this is a crazy bug that me and a colleague cannot figure out. Internet Explorer 8 crashes (no console error message). It happens when a knockout observable value is changed using a radio input with a custom binding (data-bind) AND you move out of the parent DOM container. This error CANNOT be reproduced using Internet Explorer 9 in IE 8 Browser Mode - only a true standalone Internet Explorer 8 install will produce this error.
One thing that I did notice, is that if the knockout.validation library is NOT included the crash does not occur.
Steps to reproduce:
- Copy / paste the code below to an new html file
- Open the newly created HTML file using a standalone version of Internet Explorer 8
- Click the Yes or No button on the HTML page
- Move pointer outside of red border (this triggers the crash)
Here is the code..
<html>
<head>
<title>Bootstrap / Knockout Validation Radio Button test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.0/html5shiv.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js" type="text/javascript"></script>
<![endif]-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" media="screen, print">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
</head>
<body>
<center style="border: 1px solid red;">
<div>Bootstrap 3.1.0 / KnockoutJs 3.0.0</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="inputOuterIsLeased" data-bind="bsChecked: OuterIsLeased" value="true">
Yes
</label>
<label class="btn btn-primary">
<input type="radio" name="inputOuterIsLeased" data-bind="bsChecked: OuterIsLeased" value="false">
No
</label>
</div>
<span class="error-msg clearfix" data-bind='validationMessage: OuterIsLeased'></span>
</center>
<center>
<div>
<h2>OuterIsLeased value, <span data-bind="text: OuterIsLeased"> </span>!</h2>
</div>
</center>
</body>
<script type="text/javascript">
// Here's my data model
var VehicleProfile = function(data, parent) {
var self = this;
self.IsLeased = ko.observable(false);
self.ViewIsLeased = function() { alert(ko.utils.unwrapObservable(self.IsLeased)); };
};
var ViewModel = function () {
var self = this;
self.OuterIsLeased = ko.observable(false);
self.ViewOuterIsLeased = function () { alert(ko.utils.unwrapObservable(self.OuterIsLeased)); };
};
my = { viewModel: new ViewModel() };
ko.validation.configure({
decorateElement: true,
registerExtenders: true,
messagesOnModified: true,
insertMessages: false,
parseInputAttributes: true,
messageTemplate: null,
errorElementClass: 'has-error',
grouping: { deep: true }
});
ko.bindingHandlers.bsChecked = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = valueAccessor();
var newValueAccessor = function () {
return { change: function () { value(element.value); } }
};
ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, viewModel, bindingContext);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
if ($(element).val() == ko.unwrap(valueAccessor())) {
$(element).closest('.btn').button('toggle');
}
}
}
ko.applyBindings(my.viewModel);
</script>
</html>