使用Knockout将TypeScript Class作为ViewModel？

Question

我目前正在创建这样的Knockout ViewModel,

function MyViewModel() {
    var self = this;

    self.MyObservable = ko.observable();

}

ko.applyBindings(new MyViewModel());

有没有办法将此TypeScript类用作ViewModel？

class MyViewModel {

}

我知道TSC最终会生成一个函数,但是为了坚持TypeScript约定,我想知道它是否可能？

谢谢

Answer 1

是的,在我的许多项目中,我使用TypeScript作为我的KO视图模型.以下TypeScript:

class MyViewModel {
    MyObservable = ko.observable();
    MyComputed = ko.computed(() => {
        return this.MyObservable() * 2;
    })
}

呈现以下有效的viewmodel:

var MyViewModel = (function () {
    function MyViewModel() {
        var _this = this;
        this.MyObservable = ko.observable();
        this.MyComputed = ko.computed(function () {
            return _this.MyObservable() * 2;
        });
    }
    return MyViewModel;
})();

但是在使用功能时要小心; 以下TypeScript函数:

MyFunction() {
    if (this.MyComputed() > 4) {
        alert('Higher than 4');
    }
}

将呈现:

MyViewModel.prototype.MyFunction = function () {
    if (this.MyComputed() > 4) {
        alert('Higher than 4');
    }
};

这意味着this当您在绑定中直接使用此函数时,可能会遇到范围问题(data-bind="click: MyFunction"会失败).

要防止出现这些范围问题,您应该将viewmodel中的函数声明为lambas:

MyFunction = () => {
    if (this.MyComputed() > 4) {
        alert('Higher than 4');
    }
}

呈现:

    this.MyFunction = function () {
        if (_this.MyComputed() > 4) {
            alert('Higher than 4');
        }
    };