eine Methode auf OnClick mit Typoskript

Question

Aufruf habe ich einen TS-Code wie folgt aus:

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

Hier ist der konvertierte 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 

Bei dem Klicken auf eine Schaltfläche Ich möchte anrufen die IsMicrositeRequestValid() Methode.

Hier ist der HTML:

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

Die Konsole sagt IsMicrositeRequestValid nicht definiert ist.

Irgendwelche Hinweise, warum das passiert und wie ich es beheben kann?

Answer 1

Der Aufruf von IsMicrositeRequestValid im Attribut onclick erfordert, dass die Funktion Teil des globalen Namespaces ist (window). Außerdem bin ich mir ziemlich sicher, dass Sie das Objekt MicrositeRequest instanziieren müssen, bevor der Anruf an IsMicrositeRequestValid funktioniert (weil es sich auf this stützt).

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()" /> 

ist die schnelle & schmutzige Art und Weise, die es funktioniert bekommen sollte.

Sie könnten auch dies tun:

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

, die ich denke, ist besser lesbar.

Schauen Sie auch in die Element.addEventListener Methode. Es erlaubt viel mehr Flexibilität.

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" />