javascript - TypeScript-klasse som ViewModel ved bruk av Knockout?

Jeg lager for øyeblikket min Knockout ViewModel slik:

function MyViewModel() {
    var self = this;

    self.MyObservable = ko.observable();

}

ko.applyBindings(new MyViewModel());

Finnes det en måte å bruke denne TypeScript-klassen som en ViewModel?

class MyViewModel {

}

Jeg vet at til slutt genererer TSC uansett en funksjon, men for å holde meg til TypeScript-konvensjonen vil jeg bare vite om det er mulig?

Takk

Svar #1

Ja, i mange av prosjektene mine bruker jeg TypeScript for mine KO viewmodels. Følgende TypeScript:

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

Returnerer følgende gyldige viewmodel:

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

Vær forsiktig når du bruker funksjoner; følgende TypeScript-funksjon:

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

Vil gjengi:

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

Dette betyr at du kan støte på scope-problemer med this når du bruker denne funksjonen direkte i bindingen din, for eksempel (data-bind="click: MyFunction" vil feile).

For å forhindre disse omfangsproblemene, bør du deklarere funksjonene i viewmodellene dine som lambdas:

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

Gjengir :

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

Relaterte artikler