Geek Answers Handbook

Class member becomes undefined

I am new to TypeScript and at the moment I am experiencing a strange problem. I instantiate my main class when the document is ready using jQuery.

var main: MainApp;
$(document).ready(function () {
   main = new MainApp();
});

Simplified MainApp class:

class MainApp {
   // Helper Objects
   net: AppNetworking;
   urlHelper: UrlHelper;
   cat: Category;

   // Construction
   constructor() {
      this.net = new AppNetworking();
      this.urlHelper = new UrlHelper();
   }

   // Ajax Callback with Data needed to initialize the "cat" object
   private AjaxCallback(categoryData){
      this.cat = new Category(categoryData);
   }

   // Event Handler for an HTML-Element
   // As it would be called anonymously in JS I decided to make it a static function
   static onClickSendButton(): void{
      // Using some members of the MainApp
      var hostUrl: string = main.urlHelper.getQueryStringParam("HostUrl");

      if (main.cat.isValidCategory()) {
         main.sendCategory();
      }
   }

   sendCategory(): boolean {
      // Some logic to send data via AJAX
   }
}

The function is registered in the onClick event of the button when building the class MainApp.

$("#btnSendCat").click(MainApp.onClickSendButton);

When a function is called onClickSendButton(), it throws an error:

Uncaught TypeError: Cannot read property 'isValidCategory' of undefined

When debugging, urlHelperInstance is determined , but the instance catis undefined. Since I do not affect the instance catanywhere in the application, I am really confused that it is undefined. Also, when checking a variable, mainall members are defined!

Am I doing something illegal here? Could there be problems with this code?

+4
2

, . . AJAX-Callback. this MainApp, Window. , , JavaScript.

, main Variable

class MainApp {
   // Called anonymous so it should be a static function
   private AjaxCallback(categoryData){
      // this.cat = new Category(categoryData);  ! this will be the Window Instance and not a MainApp Instance

      main.cat = new Category(categoryData); // Initialization using the "main" variable
   }
}

onClickSendButton to this.cat , this.cat .

: "this" TypeScript

+1

. , .

  • , .js , .ts
  • , .

, , .

, - .

app.ts

declare var main: MainApp;

class AppNetworking {

}

class UrlHelper {
    getQueryStringParam(input: string) {
        console.log('Got here getQueryStringParam');
        return input;
    }
}

class Category {
    isValidCategory() {
        console.log('Got here isValidCategory');
        return true;
    }
}

class MainApp {
   // Helper Objects
   net: AppNetworking;
   urlHelper: UrlHelper;
   cat: Category;

   // Construction
   constructor() {
      this.net = new AppNetworking();
      this.cat = new Category();
      this.urlHelper = new UrlHelper();
   }

   // Event Handler for an HTML-Element
   // As it would be called anonymously in JS I decided to make it a static function
   static onClickSendButton(): void{
      // Using some members of the MainApp
      var hostUrl: string = main.urlHelper.getQueryStringParam("HostUrl");

      if (main.cat.isValidCategory()) {
         main.sendCategory();
      }
   }

   sendCategory(): boolean {
       // Some logic to send data via AJAX
       return true;
   }
}

index.html snip

<div id="btnSendCat">BTN SEND CAT</div>
<script src="app.js"></script>
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script>
    var main;
    $(document).ready(function () {
        main = new MainApp();
        $("#btnSendCat").click(MainApp.onClickSendButton);
    });
</script>

:

"Got here getQueryStringParam" app.js:10
"Got here isValidCategory" app.js:19
+1

More articles:


All Articles