[英]TypeScript calling methods on class inside jquery function scope
我有下面的TypeScript類。
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");
}
}
Get
方法生成的javascript是:
BrandViewModel.prototype.Get = function () {
$.get("/api/brand", function (items) {
$.each(items, function (i, item) {
this.Add(item.Id, item.Name, item.Active);
});
}, "json");
};
我在TypeScript
文檔中看到過我可以這樣做:
public Get() : void {
$.get("/api/brand", () => function(items) {
$.each(items, function (i, item) {
this.Add(item.Id, item.Name, item.Active);
});
}, "json");
}
這導致了下面的內容,其中_this
現在是對BrandViewModel
實例的引用,但是jquery .each
函數中的this
不會像我預期的那樣更改為_this
:
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");
};
相反,我在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");
}
這給了我想要的結果:
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");
};
有誰知道更合適的方法嗎?
你可以這樣做:
public Get() : void {
$.get("/api/brand", (items) => {
$.each(items, (i, item) => {
this.Add(item.Id, item.Name, item.Active);
});
}, "json");
}
哪個產生:
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");
};
與ECMAScript 6箭頭函數一致,當使用=>時,TypeScript會以詞法方式綁定它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.