好吧..这是一个疯狂的错误，我和同事无法弄清楚。 Internet Explorer 8 崩溃（没有控制台错误消息）。当使用具有自定义绑定（数据绑定）的无线电输入更改淘汰可观察值并且您移出父 DOM 容器时，就会发生这种情况。在 IE 8 浏览器模式下使用 Internet Explorer 9 无法重现此错误 - 只有真正的独立 Internet Explorer 8 安装才会产生此错误。
我确实注意到的一件事是，如果不包含 Knockout.validation 库，则不会发生崩溃。
重现步骤：
- 将下面的代码复制/粘贴到新的 html 文件中
- 使用独立版本的 Internet Explorer 8 打开新创建的 HTML 文件
- 单击 HTML 页面上的“是”或“否”按钮
- 将指针移到红色边框之外（这会触发崩溃）
这是代码..
<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>
