Why does IE 8 crash with bootstrap, knockout validation and custom binding handler when mouse out of parent?

StackOverflow https://stackoverflow.com/questions/21536447

Pregunta

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:

  1. Copy / paste the code below to an new html file
  2. Open the newly created HTML file using a standalone version of Internet Explorer 8
  3. Click the Yes or No button on the HTML page
  4. 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>
¿Fue útil?

Solución

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.

Otros consejos

I don't have access to IE8 right now but I did come across a similar crash a while ago.

In my case it was triggered by tags not being closed in my markup (which other browsers handled gracefully).

Perhaps try closing your two input elements?

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top