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

是快速＆amp;肮脏的方式应该让它运作。

你也可以这样做：

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

Answer 2

除了彼得的回答，这里还有一个面向对象的解决方案：

Alex使用jQuery，因此我可以在此答案中随意使用它。

1。您不能调用类的方法，而只能调用对象的方法，因此必须在某个地方实例化类MicrositeRequest的对象。通常，在DOM完全填充后执行此操作，因此您可以这样写：

$(() => {
   new MicrositeRequest();
});

您可以将此代码放在类定义下，以便在浏览器加载脚本后开始。

2。给您的输入元素一个ID：

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

将IsMicrositeRequestValid对象的方法MicrositeRequest注册为input元素的onClick处理程序。为此，请将这些行添加到类MicrositeRequest的构造方法中：

let that = this;
$('#myInputElement').on('click', () => {
   that.IsMicrositeRequestValid();
});

您需要变量that，因为在事件处理程序this中指向输入元素。

使用TypeScript在OnClick上调用方法

2 个答案: