将ENUM与Typescript和Knockout结合使用

Question

I am trying to create a basic login screen, as I learn Knockout and TypeScript. I am trying to add a 'PageMode' enum that allows knockout to know what mode we're in and data bind to the pageMode property to display things correctly. However, when the screen loads, 'pageMode' is undefined. How can I get this to work?

I have created 2 models, which will be used by the knockout View Model (Login and Register), and an enum for PageMode.

In design time, pageMode is visiable - but when I run it, it fails as pageMode is undefined.

class LoginModel {
    emailAddress: KnockoutObservable<string>;
    password: KnockoutObservable<string>;
    rememberMe: KnockoutObservable<boolean>;

    constructor() {
        this.emailAddress = ko.observable("");
        this.password = ko.observable("");
        this.rememberMe = ko.observable(false);
    }
} 

class RegisterModel {
    emailAddress: KnockoutObservable<string>;
    password: KnockoutObservable<string>;
    passwordRetry: KnockoutObservable<string>;

    constructor() {
        this.emailAddress = ko.observable("");
        this.password = ko.observable("");
        this.passwordRetry = ko.observable("");
    }
}


enum PageMode {
    LoggingIn,
    RecoveringPassword,
    Registering
}

class ForgotPassword {
    emailAddress: KnockoutObservable<string>;
}

class HomeViewModel {

    login: LoginModel;
    register: RegisterModel;
    pageMode: KnockoutObservable<PageMode>;

    isLoginEnabled: KnockoutComputed<boolean>;

    constructor() {
        this.pageMode(PageMode.LoggingIn);
        this.login = new LoginModel();
        this.register = new RegisterModel();

        this.isLoginEnabled = ko.computed(() => {
            return !!this.login.emailAddress() && !!this.login.password();
        });

    }

    ShowRecoverPassword()
    {
        this.pageMode(PageMode.RecoveringPassword);
    }

    ShowRegister()
    {
        this.pageMode(PageMode.Registering);
    }

    ShowLogin()
    {
        this.pageMode(PageMode.LoggingIn);
    }




}

ko.applyBindings(new HomeViewModel());

On the HTML side, I was hoping to make divs visible via this:

<div id="register-box" data-bind="visible: pageMode() == PageMode.Registering">

However, that might be an issue too, as I don't think the page will know about the enum?

Answer 1

This actually does work. The error 'pageMode' is undefined originates from the fact that pageMode is not instantiated on HomeViewModel

So change

pageMode: KnockoutObservable<PageMode>;

to

pageMode = ko.observable<PageMode>();

In the example below, the typescript is converted to javascript:

 var LoginModel = (function () { function LoginModel() { this.emailAddress = ko.observable(""); this.password = ko.observable(""); this.rememberMe = ko.observable(false); } return LoginModel; }()); var RegisterModel = (function () { function RegisterModel() { this.emailAddress = ko.observable(""); this.password = ko.observable(""); this.passwordRetry = ko.observable(""); } return RegisterModel; }()); var PageMode; (function (PageMode) { PageMode[PageMode["LoggingIn"] = 0] = "LoggingIn"; PageMode[PageMode["RecoveringPassword"] = 1] = "RecoveringPassword"; PageMode[PageMode["Registering"] = 2] = "Registering"; })(PageMode || (PageMode = {})); var ForgotPassword = (function () { function ForgotPassword() { } return ForgotPassword; }()); var HomeViewModel = (function () { function HomeViewModel() { var _this = this; this.pageMode = ko.observable(); this.pageMode(PageMode.LoggingIn); this.login = new LoginModel(); this.register = new RegisterModel(); this.isLoginEnabled = ko.computed(function () { return !!_this.login.emailAddress() && !!_this.login.password(); }); } HomeViewModel.prototype.ShowRecoverPassword = function () { this.pageMode(PageMode.RecoveringPassword); }; HomeViewModel.prototype.ShowRegister = function () { this.pageMode(PageMode.Registering); }; HomeViewModel.prototype.ShowLogin = function () { this.pageMode(PageMode.LoggingIn); }; return HomeViewModel; }()); ko.applyBindings(new HomeViewModel()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div id="register-box" data-bind="visible: pageMode() == PageMode.LoggingIn">Logging in</div> <div id="register-box" data-bind="visible: pageMode() == PageMode.Registering">Registering</div> <button data-bind="click: ShowRegister">Show register</button> 

Answer 2

A Knockout binding can access properties on the viewmodel, global variables, and properties of the binding context. So a simple solution is to make sure enums are stored globally:

window.PageMode = PageMode;