"this" keyword when mixing Typescript, Knockout, Amplify, and RequireJs

Question

I have an mvc application where I am writing the client side code in TypeScript, as well as using several well known javascript libraries, including knockout, amplifyjs, and requirejs. I have ran into a situation where the expected behavior isn't what happens.

export class OrganizationOverviewViewModel{

    openedAssessments = ko.observableArray();
    availableSurveys = ko.observableArray();

    organizationAgentId = ko.observable();
    organizationName = ko.observable();

    selectedSurvey = ko.observable();

    public addSurvey() {
        if (this.selectedSurvey() === undefined) {
            mh.MessageHub.showError("Please Select a Survey", "what");
        }
        else {
            // we can do the post.
            // get the selected survey
            var surveyId = this.selectedSurvey();
            // call the server to add the survey

            amplify.request("addSurveyToOrganization", {
                "surveyId": surveyId,
                "organizationAgentId": this.organizationAgentId()
            },
            function (data) {
                var context = ko.contextFor($('#mainContent')[0]).$data;
                context.openedAssessments.push({ surveyId: data.SurveyId, SurveyName: data.SurveyName, NumberOfResponses: data.ResponseCount });
                context.availableSurveys.remove(function (item) { return item.SurveyId == surveyId; });
            });
        }
    }

}

The problem is in addSurvey(). Inside the amplify request, I expected the 'this' keyword to still point to the instance of the class. Instead, it pointed to the entire window. I had a workaround, which was to use knockout to go get the context from the DOM, but this really doesn't seem like it's a good idea.

Is there a better way of handling this using typescript?

To understand `this` a bit better in TypeScript : https://www.youtube.com/watch?v=tvocUcbCupA&hd=1 — basarat, Apr 21 '14 at 05:43

Ray · Answer 1 · 2013-10-08T00:58:00.220

5

In Typescript the "this" keyword follows javascript semantics rather than the semantics of OO languages like C#.... (for now?)

The only place "this" correctly points to the object is through the constructor. So you will need to write something like so:

export class OrganizationOverviewViewModel{

    public addSurvey;

    constructor() {
        this.addSurvey = () => {
           // you can safely use 'this' in here
           ...
        }
    }
    :
}

Edit : The new version (0.9.1) lets you use "this" for lambda field initializers (NOT functions). So you can use the following which translates to the code above.

export class OrganizationOverviewViewModel{

    public addSurvey = () => {
        // you can safely use 'this' in a field initializer
    }

    public badSurvey_dont_use_this() {
        // 'this' is probably not the 'this' you're looking for
    }
}

edited Oct 08 '13 at 00:58

answered Apr 02 '13 at 03:25

Ray

2,974
20
26

Does adding `self=this;` to start of every method. Then treating self as the reference to the object work? – ctrl-alt-delor Mar 24 '14 at 23:14
oh. That is what I am doing with my code, I have not found the problem yet. Could you give me a heads up. – ctrl-alt-delor Mar 26 '14 at 09:49
`self=this` works for me now - first day using TS with version 1.0. by works I mean compiles without squiggles. is this a new 'feature' ? – Simon_Weaver May 22 '14 at 20:19

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

Tak a look at TypeScript and Knockout binding to 'this' issue - lambda function needed? - its the same approach Ray mentions which seems to be correct

edited May 23 '17 at 12:01

Community

1
1

answered Apr 02 '13 at 08:31

Slawek

2,592
1
24
26

"this" keyword when mixing Typescript, Knockout, Amplify, and RequireJs

2 Answers2