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');
        }
    };

使用Knockout将TypeScript Class作为ViewModel？

1 个答案: