使用TypeScript在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

IsMicrositeRequestValid对onclick属性的调用要求该函数是全局名称空间(window)的一部分.此外,我很确定你需要MicrositeRequest在调用IsMicrositeRequestValid工作之前实例化对象(因为它依赖于它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" />