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

在viewmodel构造中，您在自变量中保留对此的引用：

var self = this;

但您并未将此自变量用于所有viewmodel的可观察对象或函数。相反，它们被分配给可能发生变化的this引用，导致＆＃34;未被定义＆＃34;错误信息。

尝试将observable和函数设置为自变量：

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

ko点击参考错误

1 个答案: