TypeScript、淘汰赛和类

Question

在我的打字稿文件中，我试图有一个可观察的类，它包含我所有的 UI 相关字段，然后我可以获取并发布到服务器。我将它放在我的视图模型之外，因为我想将我发布的字段与所有其他视图模型项分开。

所以，在我的打字稿文件中，首先，我创建了我的 UI 模型。

interface Model {
    id: KnockoutObservable<number>;
}


class MyViewModel {

    model: KnockoutObservable<Model>;

    constructor() {

    $.get("/api/debt/1")
        .done((data) => {
            this.model().id(data.ID);
        }); 
    }

}

这不起作用。由于某种原因，“this.model”是未知的。

我正在尝试做的事情是否可能？我做错了什么？

编辑：简化为仅使用 id 属性。使用接口，而不是类。在 this.model().id(data.ID) 上失败，因为“模式不是函数”。现在不知道如何初始化模型。

Answer 1

您已经定义了模型应该是什么，它是一个“KnockoutObservable”类型的对象，但是您实际上还没有创建任何东西来填充变量，所以它的值仍然是未定义的。

尝试将model: KnockoutObservable<Model>; 替换为

model: KnockoutObservable<Model> = ko.observable(new Model());

编辑 1：

此外，您还需要通过添加括号来更改下面的分配以解决未装箱模型的属性而不是可观察对象本身：

    this.model().id = ko.observable(0);
    this.model().description = ko.observable("");
    this.model().openingBalance = ko.observable(0);
    this.model().standardRate = ko.observable(0);

编辑2：

如果您在回调中使用 lambda 表达式而不是标准函数声明，Typescript 将保留“this”的上下文。

$.get("/api/debt/1")
        .done((data) => {
             this.model().id(data.ID);
        }); 

您可能还希望将新值分配给“id”可观察对象的现有实例，而不是替换可观察对象。如果你覆盖了它绑定的 observables，Knockout 的依赖跟踪将不起作用。因此，您可以像函数一样使用 observable，而不是使用赋值运算符 (=)。

编辑 3：

这里有一个更完整的例子：

class Model {
    id: KnockoutObservable<number>;
}


class MyViewModel {

    model: KnockoutObservable<Model> = ko.observable(new Model());

    constructor() {

      this.model().id = ko.observable(0);

      $.get("/api/debt/1")
        .done((data) => {
            this.model().id(data.ID);
        }); 
    }

}