調用上的OnClick方法中使用的打字稿

Question

我有一個TS這樣的代碼：

class MicrositeRequest { 
    micrositeName: string; 
    micrositeTemplate: string; 

    constructor() { 
     this.micrositeName = $("#micrositeNameId").val(); 
     this.micrositeTemplate = $("#templateId option:selected").text(); 
    } 

    public IsMicrositeRequestValid() { 
     if (this.checkForName() && this.checkForTemplate()) { 
      return true; 
     } 
     else { 
      return false; 
     } 
    } 

    checkForName() { 
     if (this.micrositeName != null && this.micrositeName.length != 0) { 
      return true; 
     } 
     else { 
      return false; 
     } 
    } 

    checkForTemplate() { 
     if (this.micrositeTemplate != null && this.micrositeTemplate.length != 0) { 
      return true; 
     } 
     else { 
      return false; 
     } 
    } 
} 

這裏的轉換JS：

/// <reference path="scripts/typings/jquery/jquery.d.ts" /> 
var MicrositeRequest = (function() { 
    function MicrositeRequest() { 
     this.micrositeName = $("#micrositeNameId").val(); 
     this.micrositeTemplate = $("#templateId option:selected").text(); 
    } 
    MicrositeRequest.prototype.IsMicrositeRequestValid = function() { 
     if (this.checkForName() && this.checkForTemplate()) { 
      return true; 
     } 
     else { 
      return false; 
     } 
    }; 
    MicrositeRequest.prototype.checkForName = function() { 
     if (this.micrositeName != null && this.micrositeName.length != 0) { 
      return true; 
     } 
     else { 
      return false; 
     } 
    }; 
    MicrositeRequest.prototype.checkForTemplate = function() { 
     if (this.micrositeTemplate != null && this.micrositeTemplate.length != 0) { 
      return true; 
     } 
     else { 
      return false; 
     } 
    }; 
    return MicrositeRequest; 
})(); 

//# sourceMappingURL=Microsite.js.map 

在點擊一個按鈕，我想打電話給IsMicrositeRequestValid()方法。

這裏的HTML：

<div> 
      <input type="submit" name="submit" value="Get" onclick="IsMicrositeRequestValid()" /> 
     </div> 

控制檯說沒有定義IsMicrositeRequestValid。

任何線索爲什麼會發生這種情況，我如何解決它？

Answer 1

對onclick屬性中IsMicrositeRequestValid的調用要求該函數是全局名稱空間（window）的一部分。此外，我敢肯定你需要在調用IsMicrositeRequestValid之前實例化MicrositeRequest對象（因爲它依賴於this）。

function validateRequest() { // declare a function in the global namespace 
    var mr = new MicrositeRequest(); 
    return mr.IsMicrositeRequestValid(); 
} 

<input type="submit" name="sumbit" value="Get" onclick="validateRequest()" /> 

是快速&骯髒的方式應該得到它的工作。

你也可以這樣做：

window.validateRequest = function() { // declare a function in the global namespace 
    var mr = new MicrositeRequest(); 
    return mr.IsMicrositeRequestValid(); 
} 

我認爲這是更具可讀性。

另外，請看Element.addEventListener方法。它允許更多的靈活性。

var submit = document.getElementById('my-submit'); 
submit.addEventListener('click', function() { 
    var mr = new MicrositeRequest(); 
    return mr.IsMicrositeRequestValid();  
}); 

<input type="submit" id="my-submit" name="sumbit" value="Get" />