knockout binding handler - undefined bindingContext.$data on IE9

Question

I am trying to create a custom binding handler to apply a role based access to fields on page. In custom handler it will check values of other observables from viewModel and based on condition it will enable or disable input control.

But I am not able to get current ViewModel through bindingContext.$parent , $root, $data or $rawData. when I debug on IE it only displays {...}

The issue occurs only on IE, It works fine on google crome. Can someone help me on how do I get current ViewModel through bindingContext.

var divForm = document.getElementById('divform');

function AuditFormViewModel() {
    self = this;
    self.Name = ko.observable("Kiran");
    self.Email = ko.observable("[email protected]");
    self.Complete = ko.observable(true);
    self.Send = ko.observable(false);
    
    self.conditionArray = [
            { Field: "Name", condition: [{ Property: "Complete", Value: true }, { Property: "Send", Value: true }] },
            { Field: "Email", condition: [{ Property: "Complete", Value: false }] }
        ];
    }

    ko.bindingHandlers.hasAccess = {
        update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
            
                        
            var field = valueAccessor();
            var accessConditions = [];
            accessConditions = bindingContext.$data.conditionArray;

            var condition = accessConditions.filter(function (cnd) {
                return cnd.Field === field
            })[0].condition;

            var value = true;
            for (var i = 0; i < condition.length; i++) {
                
                var cndProp = condition[i].Property;
                var cndVal = bindingContext.$data[cndProp]();

                value = value && (condition[i].Value === cndVal);
            }
            ko.bindingHandlers.enable.update(element, function () { return value });
        }
    };

auditFormViewModel = new AuditFormViewModel();
ko.applyBindings(auditFormViewModel, divForm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<div id="divform">
    Name : <input type="text" data-bind="value:Name, hasAccess:'Name'" />
    <br />
    Email : <input type="text" data-bind="value:Email, hasAccess:'Email'" />
</div>

Here is the fiddle

You just modify the fiddle and then click update. You will get a new jsfiddle link url which you need to update in your stackoverflow post. — Wayne Ellery
jsFiddle Link is updated or you can even check by running the code snippet from stackoverflow post. — Kiran Ramchandra Parab
Can anyone please help me on this? Is there any workaround to get this resolved? — Kiran Ramchandra Parab
Can you provide more information. When I tested it in IE11 and Chrome the bindingContect object is available. To get the data you can use bindingContect.$data. This was available in both IE and Chrome when I tested it — Wayne Ellery
Got the answer.. its just change of line. 'var self = this' instead 'self = this' — Kiran Ramchandra Parab

Kiran Ramchandra Parab Kiran Ramchandra Parab · Accepted Answer · 2014-11-17T06:55:20

In my code I have not declared self as var, its just change of line. 'var self = this' instead 'self = this'

knockout binding handler - undefined bindingContext.$data on IE9

1 Answers