当鼠标离开父母时，为什么IE 8会因引导程序，敲除验证和自定义绑定处理程序而崩溃？ [英] Why does IE 8 crash with bootstrap, knockout validation and custom binding handler when mouse out of parent?
问题描述
好的..这是我和同事无法弄清楚的一个疯狂的错误。 Internet Explorer 8崩溃（没有控制台错误消息）。当使用带有自定义绑定（数据绑定）的无线电输入更改了敲除可观察值并且您移出父DOM容器时，会发生这种情况。在IE 8浏览器模式下无法使用Internet Explorer 9重现此错误 - 只有真正独立的Internet Explorer 8安装才会产生此错误。
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.
我有一件事确实注意到，如果不包括knockout.validation库，则不会发生崩溃。
重现步骤：
- 将以下代码复制/粘贴到新的html文件
- 使用独立版本的Internet Explorer打开新创建的HTML文件8
- 单击HTML页面上的是或否按钮
- 将指针移到红色边框之外（这会触发崩溃）
- 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)
以下是代码..
<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>
推荐答案
我可以解决问题只需删除clearfix类验证消息使用的跨度如下：
I can solve the issue just remove the clearfix class for the span used by the validation message so :
<span class="error-msg" data-bind='validationMessage: OuterIsLeased'></span>
这正是我的问题，我解决了删除它，试一试。
It's exact as my problem I solve removing it, Give it a try.
这篇关于当鼠标离开父母时，为什么IE 8会因引导程序，敲除验证和自定义绑定处理程序而崩溃？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
