Question

我正在尝试使用接口，并从WebAPI调用中填充基于该接口（Model：IModel）的类，该调用返回.Net类结构。我的界面与结构，名称和类型相匹配。

Knockout视图模型代码。

interface IReferenceItem { 身份证号码; 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调用映射到我的Model类。

在api调用之后，

data具有有效数据。

但是它似乎在构造函数之外，this.Model总是＆＃39;未定义＆＃39;。我认为这是因为我没有正确地初始化它（在Get之前？）。

似乎我的模型消失了......或者变了。

在行ko.mapping.fromJS(data, {}, this.Model);上，this.Model未定义，如后续行所示。

我做错了什么？

Answer 1

在构造函数中，您将声明一个 local 变量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似乎破坏了我的模型

1 个答案: