javascript - ko点击引用错误

Question

我在 KnockoutJS 上遇到点击事件问题。当我单击应该调用函数来打开弹出窗口的图标时，或者更确切地说，当我加载页面时，出现以下错误

 knockout-3.2.0.js:63 Uncaught ReferenceError: Unable to process binding "click: function (){return showOfferDetails }"
Message: showOfferDetails is not defined

我在以下位置调用此函数:

<div title="<spring:message code="frontendResources.Details" />" class="btn-bar btn-details" data-bind="click: showOfferDetails"></div>

ViewModel的js代码是:

(function(viewModels) {
var viewModel = function(offerID) {
    var self = this;

    this.pageStates = {
        view: 0,
        showDetails: 2
    };

    this.showOfferDetails = ko.observable(null);

    this.pageState = ko.observable(this.pageStates.view);
    this.offerCredit = ko.observable(null);
    this.currentItemToShow = ko.observable(null);
    this.hasResults = ko.observable(true);
    this.tabViewModel = new TabViewModel();

    this.loadData = function () {
        backoffice.viewModels.ajaxOverlay.showLoader();
        self.showOfferDetails();

    };

    this.showOfferDetails  = function () {
        backoffice.viewModels.ajaxOverlay.showLoader();

        self.pageState(self.pageStates.showDetails);

        backoffice.viewModels.ajaxOverlay.hide();
    };


    this.hideDetails = function () {
        self.currentItemToShow(null);
        self.pageState(self.pageStates.view);
    }

    this.detailsIsVisible = ko.computed({
        read: function () {
            return self.pageState() == self.pageStates.showDetails;
        },
        write: function (value) {
            if (value) {
                self.showOfferDetails();
            } else {
                self.hideDetails();
            }
        }
    });


    this.loadData();
};

    viewModels.offerCredit = viewModel;
})( backoffice.viewModels );

可能是什么问题？

Answer 1

在 View 模型构建时，您在 self 变量中保留对此的引用:

var self = this;

但是您没有将此 self 变量用于 View 模型的所有可观察值或函数。相反，它们被分配给可能发生变化的 this 引用，从而导致“未定义”错误消息。

尝试将可观察量和函数设置为 self 变量:

self.showOfferDetails  = function () {
    backoffice.viewModels.ajaxOverlay.showLoader();
    self.pageState(self.pageStates.showDetails);
    backoffice.viewModels.ajaxOverlay.hide();
};