Verwenden von ENUM mit Typescript und Knockout

Question

Ich versuche, einen grundlegenden Login-Bildschirm zu erstellen, wie ich Knockout und TypeScript lernen. Ich versuche, eine "PageMode" -Enumerierung hinzuzufügen, die es knockout ermöglicht zu wissen, in welchem ​​Modus wir uns befinden, und Daten an die pageMode -Eigenschaft binden, um die Dinge korrekt anzuzeigen. Wenn der Bildschirm geladen wird, ist 'pageMode' jedoch nicht definiert. Wie kann ich das zur Arbeit bringen?

Ich habe 2 Modelle erstellt, die von dem Knockout View Model (Anmelden und Registrieren) und einer Enum für PageMode verwendet werden.

In Entwurfszeit ist PageMode sichtbar - aber wenn ich es ausführe, schlägt es fehl, da pageMode nicht definiert ist.

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

Auf der HTML-Seite, ich habe gehofft, dass divs sichtbar über das machen:

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

jedoch, dass auch ein Problem sein könnte, da ich nicht glaube, die Seite über das wissen enum?

Answer 1

Das funktioniert tatsächlich. Der Fehler 'pageMode' is undefined aus der Tatsache stammt, dass pageMode nicht auf HomeViewModel

ändern So

pageMode: KnockoutObservable<PageMode>; 

instanziiert

pageMode = ko.observable<PageMode>(); 

Im Beispiel unten wird das Typoskript Javascript umgewandelt:

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

Eine Knockout-Bindung kann auf Eigenschaften des Ansichtsmodells, der globalen Variablen und der Eigenschaften des Bindungskontexts zugreifen. Eine einfache Lösung besteht also darin, sicherzustellen, dass Aufzählungen global gespeichert werden:

window.PageMode = PageMode;