TypeScript Aufrufmethoden für die Klasse innerhalb der JQuery Funktionsumfang

Question

Ich habe die folgende TypeScript-Klasse.

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"); 
     } 
} 

Das resultierende Javascript für die Get Methode ist:

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

ich in der TypeScript Dokumentation gesehen habe, dass ich dies tun kann:

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

, die in der unten führt, wo _this ist jetzt eine Referenz auf die BrandViewModel Instanz, aber die this innerhalb der JQuery .each Funktion ist nicht auf _this geändert, wie ich es vielleicht erwarten:

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"); 
    }; 

Stattdessen habe ich die unten in TypeScript getan:

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"); 
    } 

, die mir das Ergebnis gibt, gebe ich wollte:

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"); 
    }; 

Kennt jemand einen geeigneteren Weg, dies zu tun?

Answer 1

Sie können dies tun:

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

Welche erzeugt:

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"); 
    }; 

Answer 2

In Übereinstimmung mit ECMAScript 6 arrow functions, Typoskript lexikalisch dies wird beim Anlegen gebunden = mit>.