简体   繁体   中英

Knockout Extended Observable returning undefined when dereferenced?

I have an "object" in Javascript that creates an extended observable, Location, among others.

When I try to populate the item with values, in Internet Explorer 11 only it seems, an error is thrown saying it is "Unable to the property 'Address1' of undefined or null reference."

What is weird is when I go into console and type out "self", it shows Location as an observable. If i type "self.Location", it shows the function of the observable. If it type "self.Location()", it says undefined. Almost everything else seems to be ok. I am including the code for two of the observables. One (Location) which causes the problem. The other, Participants, that seems similar in code, but is "observed" just fine.

    self.Participants = ko.observableArray([]).extend({
        validation: [{
            validator: function (value) {
                if ((showConfig && showConfig.CreateWorkOrder) || (showConfig && showConfig.WorkOrderNumber) || (showConfig && showConfig.WorkOrderId)) {

                    self.ModelErrors({ sort: 7, element: "participants-container", error: "", clear: true });

                    return true;
                }
                var HasGroupRoute = self.GroupRoute() != "g0";
                if (HasGroupRoute) {
                    self.ModelErrors({ sort: 7, element: "participants-container", error: "", clear: true });

                    return true;
                }
                if ((!value || value.length <= 0) || HasGroupRoute) {
                    //$("#participants-container").addClass('sp-error');
                    //$("#divErrMsgBlock").show();
                    //addressError.push("<li style='text-align: left; list-style-type: square'>You must select a participant.</li>");
                    self.ModelErrors({ sort: 7, element: "participants-container", error: "<li style='text-align: left; list-style-type: square'>You must select a participant.</li>" });
                    return false;
                }
                else {
                    //$("#participants-container").removeClass('sp-error');
                    //$("#divErrMsgBlock").hide();
                    self.ModelErrors({ sort: 7, element: "participants-container", error: "", clear: true });
                    return true;
                }
            },
            message: '',

        }]

    });
    self.Location = ko.observable().extend({
        validation: [{
            validator: function (value) {
                if (value == undefined) return;                    
                var Address1 = (value.Address1() == undefined ? null : value.Address1());
                var City = (value.City() == undefined ? null : value.City()); 
                var State = (value.StateOrProvince() == undefined ? null : value.StateOrProvince()); 
                var Zip = (value.PostalCode() == undefined ? null : value.PostalCode());
                var _mustCheck = (self.AppointmentType() == "4" || self.JobReference() != undefined) || (Address1 != null && Address1 != '') || (Address1 != null && Address1 != '') || (City != null && City != '') || (Zip != null && Zip != '');
                var _missing = (Address1 == undefined || Address1 == null) || (City == undefined || City == null) || (State == undefined || State == null) || (Zip == undefined || Zip == null);

                if (_mustCheck && _missing) {
                    //addressError.push("<li style='text-align: left; list-style-type: square'>Address is not complete.</li>");
                    self.ModelErrors({ sort: 8, element: "location-container", error: "<li style='text-align: left; list-style-type: square'>Address is not complete.</li>" });

                    if (value.Address1() == null || value.Address1() == '') {
                        //$("#appt-address1").addClass('sp-error');
                        self.ModelErrors({ sort: 8, element: "appt-address1", error: "", clear: false });
                    }
                    else {
                        //$("#appt-address1").removeClass('sp-error');
                        self.ModelErrors({ sort: 8, element: "appt-address1", error: "", clear: true });
                    }

                    if (value.City() == null || value.City() == '') {
                        //$("#appt-city").addClass('sp-error');
                        self.ModelErrors({ sort: 8, element: "appt-city", error: "", clear: false });
                    }
                    else {
                        //$("#appt-city").removeClass('sp-error');
                        self.ModelErrors({ sort: 8, element: "appt-city", error: "", clear: true });
                    }

                    if (value.StateOrProvince() == undefined || value.StateOrProvince() == '') {
                        //$("#cmboStates").addClass('sp-error');
                        self.ModelErrors({ sort: 8, element: "cmboStates", error: "", clear: false });
                    }
                    else {
                        //$("#cmboStates").removeClass('sp-error');
                        self.ModelErrors({ sort: 8, element: "cmboStates", error: "", clear: true });
                    }

                    if (value.PostalCode() == null || value.PostalCode() == null) {
                        //$("#appt-zip").addClass('sp-error');
                        self.ModelErrors({ sort: 8, element: "appt-zip", error: "", clear: false });
                    }
                    else {
                        //$("#appt-zip").removeClass('sp-error');
                        self.ModelErrors({ sort: 8, element: "appt-zip", error: "", clear: true });
                    }
                } else {
                    self.ModelErrors({ sort: 8, element: "location-container", error: "", clear: true });
                    self.ModelErrors({ sort: 8, element: "appt-address1", error: "", clear: true });
                    self.ModelErrors({ sort: 8, element: "appt-city", error: "", clear: true });
                    self.ModelErrors({ sort: 8, element: "cmboStates", error: "", clear: true });
                    self.ModelErrors({ sort: 8, element: "appt-zip", error: "", clear: true });
                }
            },
            message: ''
        }]
    });

The line causing the error in IE11 is this:

 self.Location().Address1(model.Address1);

The observable

self.Participants

is instantiated with an empty array and has a value from the very beginning.

However,

self.Location

is not supplied any initial value and will initialize without a value resulting in undefined. That said, at what point prior to calling

self.Location().Address1(model.Address1);

does your code supply a value to populate the self.location observable?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM