TypeScript,Knockout和Classes

时间:2017-02-17 21:21:15

标签: javascript asp.net-web-api knockout.js

在我的打字稿文件中,我正在尝试一个可观察的类,它包含我所有的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)上失败,因为'mode不是函数)。现在还不确定如何初始化模型。

1 个答案:

答案 0 :(得分:3)

您已经定义了应该是什么模型,它是&#34; KnockoutObservable&#34;类型的对象,但您实际上并没有创建任何内容来填充变量,因此它的值仍未定义。

尝试用

替换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:

Typescript将保留&#34;这个&#34;如果你使用lambda表达式代替标准函数声明。

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

您可能还想将新值分配给&#34; id&#34;的现有实例。可观察而不是替换可观察的。如果您覆盖其绑定的可观察对象,则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);
        }); 
    }

}