如何访问jquery事件中的类变量?

时间:2013-05-08 17:06:52

标签: typescript

如果我在jquery事件中,我不确定如何访问类变量。以下示例

/// <reference path="../typings/jquery/jquery.d.ts" />

export class Notes {

    // i want to access this inside of the click event
    test = "test";

    foo() {
        //works here
        alert(this.test);

        $("#testDiv").click(function () {

            // context of this changes so this no longer works
            alert(this.test);

            //how do i access the test varible in here?



        })
    }
}

2 个答案:

答案 0 :(得分:5)

如果使用lambda表达式,它会将this绑定到封闭范围的this

export class Notes {
    private test: string = "test";

    foo() {
        //works here
        alert(this.test);

        $("#testDiv").click(() => {
            alert(this.test);
        })
    }
}

被翻译成

var Notes = (function () {
    function Notes() {
        this.test = "test";
    }
    Notes.prototype.foo = function () {
        var _this = this;
        alert(this.test);
        $("#testDiv").click(function () {
            alert(_this.test);
        });
    };
    return Notes;
})();
exports.Notes = Notes;

但要注意,在jQuery回调中,由于this已被翻译,因此无法按预期访问DOMElement。如果您希望能够同时执行这两项操作,请自行将this添加到闭包中的变量:

export class Notes {
    private test: string = "test";

    foo() {
        alert(this.test);
        var self = this;
        $("#testDiv").click(function() {
            alert(self.test);
            $(this).hide(); // still works
        })
    }
}

答案 1 :(得分:1)

我找到了一种有效的方法,但我觉得可能有更好的方法吗?

export class Notes {
    test = "test";

    foo() {
        var self = this;

        $("#testDiv").click(function () {
            alert(self.test);
        })
    }
}