ko.mapping 似乎破坏了我的模型答案

【问题标题】：ko.mapping seems to destroy my modelko.mapping 似乎破坏了我的模型
【发布时间】：2017-02-18 10:51:50
【问题描述】：

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

挖空视图模型代码。

接口 IReferenceItem { 身份证号码; 文本：字符串； }

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 总是“未定义”。我认为这是因为我没有正确初始化它（在获取之前？）。

我的模型似乎消失了……或者被改变了。

在ko.mapping.fromJS(data, {}, this.Model); 行中，this.Model 未定义，与后续行一样。

我做错了什么？

【问题讨论】：

我相信你的意思是ko.mapping.fromJS(data, this.Model, this);
data 是我从 api 调用中得到的模型，这是 viewmodel，而 this.Model 是我想要保存我的所有 ui 数据的模型。我已经从视图模型中分离出数据，这样我就可以在保存时将其发布回来。所以我认为这是不对的。

标签： javascript knockout.js

【解决方案1】：

在构造函数中，您声明了一个本地变量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....");
    }
}

【讨论】：