ko click click error

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

在視圖模型建造你保持這個參考在自變量：

var self = this; 

，但你不使用這種自我變量對所有視圖模型的觀測或功能。相反，它們被分配給可能變化的this引用，導致「未定義」錯誤消息。

嘗試觀測和功能設置爲自變量：

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