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("kiranparab0@gmail.com");
    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, Sep 29 '14 at 06:57
jsFiddle Link is updated or you can even check by running the code snippet from stackoverflow post. — Kiran Ramchandra Parab, Sep 29 '14 at 07:01
Can anyone please help me on this? Is there any workaround to get this resolved? — Kiran Ramchandra Parab, Sep 30 '14 at 07:06
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, Oct 02 '14 at 01:37
Got the answer.. its just change of line. 'var self = this' instead 'self = this' — Kiran Ramchandra Parab, Oct 06 '14 at 06:46
Kiran, you should set that as the answer and mark it as accepted so others don't see it in "unanswered". The other thing to look at is that you can just use the `viewModel` parameter that you're taking in your `update` function. Instead of the `bindingContext.$data` which is more brittle in case you move your properties around. — Milimetric, Nov 06 '14 at 02:42

score 1 · Accepted Answer · answered Nov 17 '14 at 06:55

1

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

answered Nov 17 '14 at 06:55

Kiran Ramchandra Parab

486
6
23

knockout binding handler - undefined bindingContext.$data on IE9

1 Answers1