javascript - Pozivanje metode na OnClick koristeći TypeScript

Imam TS kod ovakav:

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

Evo konvertiranog JS-a:

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

Klikom na gumb želim pozvati metodu IsMicrositeRequestValid().

Evo HTML-a:

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

Konzola kaže da IsMicrositeRequestValid nije definirano.

Ima li ikakvih naznaka zašto se ovo događa i kako to mogu popraviti?

Odgovor #1

Poziv IsMicrositeRequestValid u atributu onclick zahtijeva da funkcija bude dio globalnog prostora imena (window). Nadalje, prilično sam siguran da ćete morati instancirati objekt MicrositeRequest prije poziva IsMicrositeRequestValid da bi radio (jer se oslanja na 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()" />

to je brz i neuredan način koji bi trebao natjerati da radi.

Također biste mogli učiniti ovo:

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

što mislim da je čitljivije.

Također, pogledajte metodu Element.addEventListener. Ona omogućuje mnogo veću fleksibilnost.

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

Povezani članci