TypeScript calling methods on class inside jquery function scope

Question

I have the below TypeScript class.

export class BrandViewModel {

        private _items = ko.observableArray();

        public Add(id: number, name: string, active: boolean) : void {
            this._items.push(new BrandItem(this, id, name, active));
        }

        public Get() : void  {
            $.get("/api/brand", function(items) {
                $.each(items, function (i, item) {
                        this.Add(item.Id, item.Name, item.Active);
                    });
            }, "json");
        }
}

The resulting javascript for the Get method is:

    BrandViewModel.prototype.Get = function () {
        $.get("/api/brand", function (items) {
            $.each(items, function (i, item) {
                this.Add(item.Id, item.Name, item.Active);
            });
        }, "json");
    };

I have seen in the TypeScript documentation that I can do this:

    public Get() : void  {
        $.get("/api/brand", () => function(items) {
            $.each(items, function (i, item) {
                    this.Add(item.Id, item.Name, item.Active);
                });
        }, "json");
    }

Which results in the below, where _this is now a reference to the BrandViewModel instance but the this inside the jquery .each function is not changed to _this as I might expect:

    BrandViewModel.prototype.Get = function () {
        var _this = this;
        $.get("/api/brand", function () {
            return function (items) {
                $.each(items, function (i, item) {
                    this.Add(item.Id, item.Name, item.Active);
                });
            };
        }, "json");
    };

Instead I have done the below in TypeScript:

    public Get(): void {
        var _this = this;
        $.get("/api/brand", function(items) {
            $.each(items, function (i, item) {
                    _this.Add(item.Id, item.Name, item.Active);
                });
        }, "json");
    }

which gives me the result I wanted:

    BrandViewModel.prototype.Get = function () {
        var _this = this;
        $.get("/api/brand", function (items) {
            $.each(items, function (i, item) {
                _this.Add(item.Id, item.Name, item.Active);
            });
        }, "json");
    };

Does anyone know a more appropriate way to do this?

can you help me about my demo.I don't know why it can not run stackoverflow.com/questions/46834032/… — ziqi
– ziqi, Commented Oct 22, 2017 at 4:44

Ryan Cavanaugh · Accepted Answer · 2013-09-04 16:06:57Z

11

You can do this:

    public Get() : void  {
        $.get("/api/brand", (items) => {
            $.each(items, (i, item) => {
                    this.Add(item.Id, item.Name, item.Active);
                });
        }, "json");
    }

Which generates:

    BrandViewModel.prototype.Get = function () {
        var _this = this;
        $.get("/api/brand", function (items) {
            $.each(items, function (i, item) {
                _this.Add(item.Id, item.Name, item.Active);
            });
        }, "json");
    };

answered Sep 4, 2013 at 16:06

Ryan Cavanaugh

223k59 gold badges280 silver badges235 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pricey Over a year ago

Very nice, thank you. Any chance of a bit of explanation on how that works as it does? i.e. knows to place the _this outside of both functions?

basarat Over a year ago

That gets generated when you use the fat arrow notation I.e. ()=>{}

Pricey Over a year ago

@basarat what I am asking though is the fat arrow notation is being used twice and nested.. how does _this get put in the correct place.

basarat Over a year ago

@Pricey typescript will generate it at the top of a fat arrow chain. If you have a function() in between then that chain will break.

Tom Palmer · Accepted Answer · 2013-09-04 21:54:29Z

0

Consistent with ECMAScript 6 arrow functions, TypeScript lexically binds this when using =>.

answered Sep 4, 2013 at 21:54

Tom Palmer

4625 silver badges12 bronze badges

Collectives™ on Stack Overflow

TypeScript calling methods on class inside jquery function scope

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related