2017-07-04 68 views
1

請看看下面的代碼:是否有可能在淘汰賽忽略「數據綁定=用......」

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 

<body> 
    <form data-bind="with: selectedMerchant"> 
     <h1 data-bind="text: name"></h1> 
     <button data-bind="click: show"> SHOW </button> 
    </form> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js" type="text/javascript"></script> 
    <script> 
     function PartnersViewModel() { 
      self.selectedMerchant = ko.observable({'name': 'John'}); 
      self.show = function() { 
       alert(JSON.stringify(self.selectedMerchant())); 
      } 
     } 
     ko.applyBindings(new PartnersViewModel()); 
    </script> 
</body> 
</html> 

正如你可以看到,該行:

<form data-bind="with: selectedMerchant"> 

使對象selectedMerchant'形式的結合上下文這就是爲什麼「的內部h1'標籤,我們將看到名爲‘約翰’

然而,該行:。

<button data-bind="click: show"> SHOW </button> 

說(據我所知),一旦按鈕被點擊,方法「顯示」裏面對象'selectedMerchant'將被調用。當然這個方法在selectedMerchant中不存在,所以我期望看到一個錯誤。

令我驚訝的是,它工作正常,我得到一個彈出窗口說:

{'name': 'John'}

我不明白爲什麼knockout.js調用它是對象「selectedMerchant」之外的方法。有沒有人有一個很好的解釋?

回答

2

您從視圖模型聲明的開頭處缺少var self = this;

沒有宣佈selfself.show = function() { ...聲明window對象在全球show功能,這就是爲什麼KO可以找到這個處理程序。

因此,與正常申報self你的代碼會給出預期的錯誤:Message: show is not defined

<script> 
    function PartnersViewModel() { 
     var self = this; 
     self.selectedMerchant = ko.observable({'name': 'John'}); 
     self.show = function() { 
      alert(JSON.stringify(self.selectedMerchant())); 
     } 
    } 
    ko.applyBindings(new PartnersViewModel()); 
</script>