Question

我正在尝试创建一个基本的登录屏幕，因为我学习了Knockout和TypeScript。我正在尝试添加一个'PageMode'枚举，允许敲除以了解我们所处的模式以及数据绑定到pageMode属性以正确显示内容。但是，当屏幕加载时，'pageMode'未定义。我怎样才能让它发挥作用？

我创建了两个模型，这些模型将由淘汰视图模型（登录和注册）使用，以及一个用于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：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

Knockout绑定可以访问视图模型，全局变量和绑定上下文属性的属性。因此，一个简单的解决方案是确保枚举存储在全局：

window.PageMode = PageMode;

将ENUM与Typescript和Knockout一起使用

2 个答案: