如何从 Kinetic.js 点击事件中访问类答案

【问题标题】：how to get access to classes from a Kinetic.js click event如何从 Kinetic.js 点击事件中访问类
【发布时间】：2013-05-14 19:56:16
【问题描述】：

我似乎无法在我的点击事件中获得打字稿类实例。

我有一个 TypeScript 类 Navigation。

class Navigation
{
    currentPage: number;

    wireMouseEvents()
     {
        this.buttonPrevious.on("click", function(): void {
            if (this.currentPage > 1)
            {
                // do more work with Navigation objects
            }
        });
    }
}

这是生成的 JavaScript：

Navigation.prototype.wireMouseEvents = function () {
    var _this = this;
    this.buttonPrevious.on("click", function () {
        if(_this.currentPage > 1) {
            // do more work with Navigation objects

        }
    });
};

事件被触发，但 currentPage 未定义。在调试器的单击事件中查看“this”时，它是一个 Kinetic.Text 对象。

如何确保点击处理程序的范围是我的班级Navigation？

【问题讨论】：

能否也粘贴生成的 JavaScript？
Navigation.prototype.wireMouseEvents = function () { var _this = this; this.buttonPrevious.on("点击", function () { if(_this.currentPage > 1) { } });
谢谢，我将答案标记为删除，因为它不应该是一个答案:)。我不确定我能否为你解答，但至少现在清楚多了。
-1 因为问题有问题。将该 TypeScript 粘贴到 Playground 中，您可以看到它没有编译为该 JavaScript。没有粗箭头 == 没有自动 _this.

标签： click typescript kineticjs

【解决方案1】：

您发布的 Typescript 无法编译为您发布的 JavaScript。 this.buttonPrevious.on("click", function(): void { 等不会生成 _this 来维护词法范围。只有this.buttonPrevious.on("click", () => { 会这样做。见here。

你需要使用粗箭头函数来维护范围：

class NavigationWithFatArrow
{
    currentPage: number;

    wireMouseEvents()
     {
        this.buttonPrevious.on("click", () => {
            if (this.currentPage > 1)
            {
                // do more work with Navigation objects
            }
        });
    }
}

您可能还需要尝试在构造函数中进行绑定，以确保始终获得正确的“this”。请在此处查看 Ryan Cavanaugh 的回答：https://stackoverflow.com/a/16029714/1014822

【讨论】：

我不确定为什么它与我从 VS2012 复制的不匹配。嗯。谢谢你的建议；今天早上我会看看它。
胖箭也有同样的问题。 currentPage 未定义。我接下来看看绑定构造函数。
JcFx：感谢您的帮助；我有它的工作。让我失望的一件事是，当我在 click 函数中时，我的所有类变量都说未定义，我停止了代码 b/c，我认为有问题。但是，如果我继续并进入一个类方法，变量就被定义了。