淘汰賽：無法讀取屬性「x」的不確定

Question

Im的得到一個遺漏的類型錯誤：調用widget.Test（）在beforeAppear時無法讀取的不確定財產「目標」。

define(
      //------------------------------------------------------------------- 
      // DEPENDENCIES 
      //------------------------------------------------------------------- 
     ['knockout'], 

     // ------------------------------------------------------------------- 
     // MODULE DEFINITION 
     // ------------------------------------------------------------------- 
     function (ko) { 

     "use strict"; 

     return { 

      First_Arr: ko.observableArray(['arrayItem0', 'arrayItem1', 'arrayItem2', 'arrayItem3']), 
      Second_Arr: ko.observableArray(['arrayItem0', 'arrayItem1', 'arrayItem2']), 

      Test: function(widget, event) {    

       var element = event.target;   
       var pathname = location.pathname; 
       var anotherArray = [ 
        ["/some-url-path", widget.First_Arr()], 
        ["/some-other-url-path", widget.Second_Arr()] 
       ]; 

       for (var i = 0; i < anotherArray.length; i++) { 
        // Do some stuff and console.log the array items       
       } 

      }, 

      beforeAppear: function(page) { 

       var widget = this; 
       widget.Test(); 

      } 
     } 
    } 
); 

奇怪的是，如果我在視圖中創建一個按鈕，例如：

<button id="btn-click" data-bind="click: Test">test</button> 

並單擊它，然後我得到打印出我的數組中的內容到所期望的結果如預期的控制檯。

PS。我試着註釋掉var element = event.target;線，因爲我認爲這是問題的根源，但這只是產生以下內容：未捕獲TypeError：無法讀取未定義的屬性'First_Arr（）'。

有點茫然與這一個。任何援助都會有所幫助。

Answer 1

當你調用widget.Test()你是不是傳遞一個事件參數，以便將event不定，event.target將錯誤，因爲target不會對「不確定」的存在。在點擊綁定中，單擊「事件」會自動傳遞到函數中。

第二個問題是var widget = this;本質上是設置widget = beforeAppear;。在一個函數內，「this」是指函數本身。請參閱How does the "this" keyword work?

而不是將您的模塊定義爲對象字面值，您可以使用構造函數代替更好的運氣。見Should I be using object literals or constructor functions?

這可能會是這個樣子：

define(
      //------------------------------------------------------------------- 
      // DEPENDENCIES 
      //------------------------------------------------------------------- 
     ['knockout'], 

     // ------------------------------------------------------------------- 
     // MODULE DEFINITION 
     // ------------------------------------------------------------------- 
     function (ko) { 

     "use strict"; 

     return function(){ 
      var self = this; 

      self.First_Arr = ko.observableArray(['arrayItem0', 'arrayItem1', 'arrayItem2', 'arrayItem3']); 
      self.Second_Arr = ko.observableArray(['arrayItem0', 'arrayItem1', 'arrayItem2']); 

      self.Test = function(widget, event) { 
       var element = event.target;   
       var pathname = location.pathname; 
       var anotherArray = [ 
        ["/some-url-path", self.First_Arr()], 
        ["/some-other-url-path", self.Second_Arr()] 
       ]; 

       for (var i = 0; i < anotherArray.length; i++) { 
        // Do some stuff and console.log the array items       
       }  
      } 

      self.beforeAppear = function(page) { 
       //var widget = this; 
       self.Test();  
      } 
     }(); 
    } 
);