Javascript 使用 TypeScript 在 OnClick 上调用方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26930592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calling a method on OnClick using TypeScript
提问by Codehelp
I have a TS code like this:
我有一个像这样的 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;
}
}
}
Here's the converted JS:
这是转换后的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
On Click of a button I want to call the IsMicrositeRequestValid()method.
单击按钮时，我想调用该IsMicrositeRequestValid()方法。
Here's the HTML:
这是 HTML：
<div>
<input type="submit" name="submit" value="Get" onclick="IsMicrositeRequestValid()" />
</div>
The Console says IsMicrositeRequestValidis not defined.
控制台说IsMicrositeRequestValid未定义。
Any clues why this is happening and how I can fix it?
任何线索为什么会发生这种情况以及我如何解决它？
回答by pete
The call to IsMicrositeRequestValidin the onclickattribute requires that the function be part of the global namespace (window). Further, I'm pretty sure you'll need to instantiate MicrositeRequestobject before the call to IsMicrositeRequestValidwork (because it relies on this).
要在通话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()" />
is the quick & dirty way which should get it working.
是应该让它工作的快速和肮脏的方式。
You could also do this:
你也可以这样做：
window.validateRequest = function () { // declare a function in the global namespace
var mr = new MicrositeRequest();
return mr.IsMicrositeRequestValid();
}
which I think is more readable.
我认为这更具可读性。
Also, look into the Element.addEventListenermethod. It allows much more flexibility.
另外，看看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" />
