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

Question

在学习 Knockout 和 TypeScript 的过程中，我正在尝试创建一个基本的登录屏幕。我正在尝试添加一个“PageMode”枚举，它允许 knockout 知道我们所处的模式并将数据绑定(bind)到 pageMode 属性以正确显示内容。但是，当屏幕加载时，“pageMode”未定义。我怎样才能让它发挥作用？

我已经创建了 2 个模型，它们将被 knockout 的 View 模型(登录和注册)和一个用于 PageMode 的枚举使用。

在设计时，pageMode 是可见的 - 但当我运行它时，它失败了，因为 pageMode 未定义。

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">

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

Answer 1

这确实有效。错误 'pageMode' is undefined 源于 pageMode 未在 HomeViewModel

上实例化这一事实

所以改变

pageMode: KnockoutObservable<PageMode>;

到

pageMode = ko.observable<PageMode>();

在下面的示例中，typescript 被转换为 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>