knockout.js 未捕获的类型错误:无法处理绑定,消息:无法读取未定义的属性

sgtfey8w  于 2023-01-02  发布在  其他
关注(0)|答案(1)|浏览(177)

使用Observable showCancelToolModal创建了一个模态。当到达指定的浏览器页面时,我收到控制台错误:

下面是HTML:

<!---------------------------------------------------------------------------------------------------------------------------------------->
<!-- Cancel Tool Modal                                                                                                                  -->
<!---------------------------------------------------------------------------------------------------------------------------------------->
<!-- ko if: this.model.showCancelToolModal() -->
<div class="app-modal modal fade" id="cancelToolModal" tabindex="-1" role="dialog" aria-labelledby="#modaltitle" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" aria-label="Close" data-bind="click: function(){ closeToolWarning(); }"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modaltitle"><i class="fa fa-edit"></i><label data-bind="text: model.selectedToolVersion()"></label></h4>
            </div>
            <div class="modal-body">
                <div class="app-form teacher-assignment">

                    <div class="entity-detail classroom border-bottom">
                        <h3 class="name">
                            <span class="item-id labeled"><smart-label params="key: 'ObservationClassroomTeacherModalClassroomLabel'"></smart-label></span>
                            <!-- ko if: !!model.selectedClassroomObservation && !!model.selectedClassroomObservation() -->
                            <label class="age" data-bind="text: model.selectedClassroomObservation().classroom.name()"></label>
                            <!-- /ko -->
                        </h3>

                    </div>
                    <div class="form-section">

                        <div class="instructions">
                            <label><span data-bind="html: model.observationCancellationDialogBody()"></span></label>
                        </div>
                        <div class="validation-line">
                            <!-- ko if: (!!model.observationCancellation.newClassroomId && !!model.observationCancellation.newClassroomId()) || model.isAdmin() || model.isObservationAdmin() -->
                            <div class="form-group no-margin inline-validation input-validation">
                                <label><smart-label-literal params="key:'OrgObservationNewClassroom', defaultText: 'New Classroom'"></smart-label-literal></label>
                                <select data-bind="options: model.cancelableClassrooms, optionsText: 'name', optionsValue: 'id', value: model.observationCancellation.newClassroomId, optionsCaption: 'Select Eligible Classroom', valueAllowUnset: true"></select>
                                <i class="fa fa-exclamation-triangle validation-icon"></i>
                            </div>
                            <!-- /ko -->
                            <!-- ko if: (!model.observationCancellation.newClassroomId || !model.observationCancellation.newClassroomId()) && !model.isAdmin() && !model.isObservationAdmin() -->
                            <div class="form-group no-margin inline-validation input-validation validationElement">
                                <label><smart-label-literal params="key:'OrgObservationNewClassroom', defaultText: 'New Classroom'"></smart-label-literal></label>
                                <select data-bind="options: model.cancelableClassrooms, optionsText: 'name', optionsValue: 'id', value: model.observationCancellation.newClassroomId, optionsCaption: 'Select Eligible Classroom', valueAllowUnset: true"></select>
                                <i class="fa fa-exclamation-triangle validation-icon"></i>
                            </div>
                            <!-- /ko -->
                        </div>
                        <div class="validation-line">
                            <!-- ko if: !!model.observationCancellation.cancellationReason && !!model.observationCancellation.cancellationReason() -->
                            <div class="form-group no-margin inline-validation input-validation">
                                <label>Cancellation Reason</label>
                                <textarea class="form-control" data-bind="value: model.observationCancellation.cancellationReason"></textarea>
                                <i class="fa fa-exclamation-triangle validation-icon"></i>
                            </div>
                            <!-- /ko -->
                            <!-- ko if: !model.observationCancellation.cancellationReason || !model.observationCancellation.cancellationReason() -->
                            <div class="form-group no-margin inline-validation input-validation validationElement">
                                <label>Cancellation Reason</label>
                                <textarea class="form-control" data-bind="value: model.observationCancellation.cancellationReason"></textarea>
                                <i class="fa fa-exclamation-triangle validation-icon"></i>
                            </div>
                            <!-- /ko -->
                        </div>

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="twobutton-col">
                        <button class="btn primary-btn btn-lg" data-bind="enable: ((!!model.observationCancellation.newClassroomId && !!model.observationCancellation.newClassroomId()) || model.isAdmin() || model.isObservationAdmin()) && !!model.observationCancellation.cancellationReason && !!model.observationCancellation.cancellationReason(), click: function(){ saveCancellation(); }"><smart-label params="key: 'GenericSave'"></smart-label></button>
                    </div>
                    <div class="twobutton-col">
                        <button class="btn btn-gray btn-lg" data-bind="click: function(){ closeToolWarning(); }"><smart-label params="key: 'GenericClose'"></smart-label></button>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /ko -->

下面是相关的视图模型代码:关闭工具警告:

self.closeToolWarning = (): void => {
            swal({
                title: self.smartlabels.genericCloseWithoutSavingTitle(),
                text: self.smartlabels.genericCloseWithoutSubmittingHtml(),
                html: true,
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: self.smartlabels.genericYes(),
                cancelButtonText: self.smartlabels.genericNo(),
                closeOnConfirm: true,
                closeOnCancel: true,
            }, function (isConfirm) {
                if (isConfirm) {
                    self.model.selectedStatusId(ObservationStatusEnum.Pending);
                    self.model.selectedObserverId(0);
                    self.model.selectedObserverTypeId(null);
                    $('#addToolModal').modal("hide");
                    $('#cancelToolModal').modal("hide");
                    this.model.showCancelToolModal(false);
                    self.setting.showModal(false);
                } else {

                }
            });
        };

关于保存工具:

self.onSaveTool = (): void => {

            if (self.model.selectedStatusId() == ObservationStatusEnum.Cancelled) {
                this.model.showCancelToolModal(true);
                $('#cancelToolModal').modal("show");
            }
            else if (self.model.selectedStatusId() == ObservationStatusEnum.RevisionsRequired) {
                $('#addToolModal').modal("hide");
                self.noteSettings.observationId(observation.id());
        };

self.SaveCancellation:

self.saveCancellation = (): void => {
            OrgFactory.Observation.cancelObservation(self.model.observationCancellation, function (data) {
                $('#cancelToolModal').modal("hide");
                this.model.showCancelToolModal(false);
                location.reload();
            },
        }

删除了尽可能多的代码,以保持简洁,同时仍然显示所有必要的内容。

3htmauhk

3htmauhk1#

回答我自己的问题。我所要做的就是从HTML中删除"this"。我将Knockout文档与代码中存在的其他if语句进行了比较,发现没有其他ko if语句有"this"。

<!---------------------------------------------------------------------------------------------------------------------------------------->
<!-- Cancel Tool Modal                                                                                                                  -->
<!---------------------------------------------------------------------------------------------------------------------------------------->
<!-- ko if: this.model.showCancelToolModal() -->

之后:

<!---------------------------------------------------------------------------------------------------------------------------------------->
<!-- Cancel Tool Modal                                                                                                                  -->
<!---------------------------------------------------------------------------------------------------------------------------------------->
<!-- ko if: model.showCancelToolModal() -->

相关问题