Chiamare un metodo su OnClick utilizzando dattiloscritto

Question

Ho un codice TS come questo:

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

Ecco il convertito 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 

Su clic di un pulsante voglio chiamare il metodo IsMicrositeRequestValid().

Ecco il codice HTML:

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

La Console dice IsMicrositeRequestValid non è definito.

Eventuali indizi sul motivo per cui ciò sta accadendo e su come posso risolverlo?

Answer 1

La chiamata a IsMicrositeRequestValid nell'attributo onclick richiede che la funzione faccia parte dello spazio dei nomi globale (window). Inoltre, sono abbastanza sicuro che sarà necessario istanziare l'oggetto MicrositeRequest prima che la chiamata a IsMicrositeRequestValid funzioni (perché si basa su 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()" /> 

è il rapido & modo sporco che dovrebbe farlo funzionare.

Si potrebbe anche fare questo:

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

che credo sia più leggibile.

Inoltre, esaminare il metodo Element.addEventListener. Permette molta più flessibilità.

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