koクリック参照エラー

Question

KnockoutJSのclickイベントに問題があります。 私がポップアップを開くための関数を呼び出す必要がありますアイコンをクリックするか、むしろ私はページをロードするとき、私は次のようなエラー

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); 

何が問題なのですか？

var self = this; 

が、あなたはのviewmodelの観測や機能のすべては、この自己変数を使用していない：

Answer 1

はviewmodelの建設で、あなたは自己変数にこのへの参照を保持します。代わりに、おそらく変更されているthis参照に割り当てられ、「定義されていません」というエラーメッセージが表示されます。

は、自己の変数に観測し、機能を設定してみてください：

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