ko.mapping似乎破坏我的模型
问题描述:
我想使用一个接口,并根据WebAPI调用基于该接口(Model:IModel)填充类,该WebAPI调用返回.Net类结构。我的界面匹配结构,名称和类型。ko.mapping似乎破坏我的模型
Knockout视图模型代码。
interface IReferenceItem { id:number; text:string; }
interface IModel {
ID: KnockoutObservable<number>;
HasPromotion: KnockoutObservable<boolean>;
DebtPaymentTypeId: KnockoutObservable<number>;
Description: KnockoutObservable<string>;
DueDayOfMonth: KnockoutObservable<number>;
OpeningBalance: KnockoutObservable<number>;
StandardRate: KnockoutObservable<number>;
MinimumMonthlyPercentage: KnockoutObservable<number>;
MinimumMonthlyPayment: KnockoutObservable<number>;
PromotionEndDate: KnockoutObservable<Date>;
PromotionalRate: KnockoutObservable<number>;
}
class DebtViewModel {
PaymentTypes: KnockoutObservableArray<IReferenceItem>;
DaysOfMonth: KnockoutObservableArray<IReferenceItem>;
LoadedState: KnockoutObservable<boolean> = ko.observable(false);
Model: IModel;
constructor() {
var self = this;
$.get("/api/debt/1")
.done((data) => {
self.Model = ko.mapping.fromJS(data);
console.debug(data);
console.debug(self.Model.Description());
alert(self.Model.ID());
self.LoadedState(true);
});
this.PaymentTypes = ko.observableArray([{ "id": 1, "text": "Fixed Amount" }, { "id": 2, "text": "Percentage based" }])
this.DaysOfMonth = ko.observableArray([{ "id": 1, "text": "1st" }, { "id": 2, "text": "2nd" }, { "id": 3, "text": "3rd" }])
ko.computed(() => {
if (self.LoadedState()) {
alert(self.Model.ID());
}
});
}
save = function() {
alert("Save Model back to the POST API call....");
}
}
ko.applyBindings(new DebtViewModel());
我试图从API调用的数据映射,以我的模型类。
data
,在api调用之后,具有有效数据。
但似乎在构造函数之外,this.Model总是'Undefined'。我认为这是因为我没有正确初始化它(在Get之前)。
看来我的模型消失了......或者被改变了。
在行上,ko.mapping.fromJS(data, {}, this.Model);
,this.Model未定义,如同后续行。
我在做什么错?
答
在构造函数中声明一个本地变量self,它将接收api调用的结果。
但是,在这个构造函数之外的任何地方,这个局部变量将不可访问。参考this.Model
将不会引用此局部变量,而是引用类属性Model
。
您已经在使用一个箭头的功能,所以我想你可以试试这个:
class DebtViewModel {
...
Model: IModel;
constructor() {
$.get("/api/debt/1")
.done((data) => {
this.Model = ko.mapping.fromJS(data);
});
...
}
save() {
var myModel = this.Model;
alert("Save Model back to the POST API call....");
}
}
我相信你的意思是'ko.mapping.fromJS(数据,this.Model,这一点);' –
数据是我从api调用获得的模型,这是viewmodel,而this.Model是我想要保存所有我的ui数据的模型。我从视图模型中分离出数据,这样我就可以将它保存在保存中。所以我不这样做是对的。 – Craig