javascript - 将ENUM与Typescript和Knockout结合使用

我正在尝试创建一个基本的登录屏幕，因为我学习了KokOutt和TypeScript。我正在尝试添加一个“pageMode”枚举，它允许knockout知道我们处于什么模式，并将数据绑定到pageMode属性以正确显示内容。但是，当屏幕加载时，“pagemode”未定义。我怎样才能让它工作？
我已经创建了两个模型，knockout视图模型（login和register）将使用它们，pagemode将使用一个枚举。
在设计时，pageMode是可见的——但是当我运行它时，它会失败，因为PaPoMeDE是未定义的。

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());

在html方面，我希望通过以下方式使div可见：

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

但是，这也可能是一个问题，因为我不认为页面会知道枚举？

最佳答案

这确实有效。错误'pageMode' is undefined源自PaMeMod未在HomeViewModel上实例化的事实。
所以改变

pageMode: KnockoutObservable<PageMode>;

到

pageMode = ko.observable<PageMode>();

在下面的示例中，Type Script被转换成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>