【问题标题】:Knockout Extended Observable returning undefined when dereferenced?取消引用时,Knockout Extended Observable 返回未定义?
【发布时间】:2014-12-03 05:06:18
【问题描述】:

我在 Javascript 中有一个“对象”,它创建了一个扩展的可观察对象、位置等。

当我尝试用值填充项目时,似乎只有在 Internet Explorer 11 中,会抛出一个错误,指出它是“无法使用未定义或空引用的属性 'Address1'”。

奇怪的是,当我进入控制台并输入“self”时,它会将位置显示为可观察的。如果我输入“self.Location”,它会显示 observable 的功能。如果它键入“self.Location()”,它会显示未定义。几乎其他一切似乎都很好。我包括两个可观察的代码。导致问题的一个(位置)。另一个,Participants,在代码上看起来很相似,但“观察”得很好。

    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: ''
        }]
    });

在 IE11 中导致错误的行是这样的:

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

【问题讨论】:

    标签: javascript knockout.js


    【解决方案1】:

    可观察的

    self.Participants
    

    用一个空数组实例化,并且从一开始就有一个值。

    然而,

    self.Location
    

    没有提供任何初始值,并且将在没有值的情况下进行初始化,从而导致未定义。也就是说,在调用之前的什么时候

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

    您的代码是否提供了一个值来填充 self.location observable?

    【讨论】:

    • 我深入研究了代码,你是对的。我在 self.Location().Address1 之前添加了 if (!self.Location()) self.Location(new AddressModel()) 其中 AddressModel 有所有需要的东西。
    猜你喜欢
    • 2015-04-05
    • 1970-01-01
    • 2018-04-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多