TypescriptとKnockoutでENUMを使用

Question

KnockoutとTypeScriptを学ぶので、基本的なログイン画面を作成しようとしています。ノックアウトが私たちがどのモードにいるのかを知り、正しく表示するためにpageModeプロパティにデータをバインドする 'PageMode' enumを追加しようとしています。ただし、画面が読み込まれると、 'pageMode'は未定義です。これをどのように機能させることができますか？

ノックアウトビューモデル（ログインと登録）で使用される2つのモデルとPageModeの列挙型を作成しました。

デザイン時に、pageModeは可視ですが、実行すると、pageModeが定義されていないため失敗します。 HTML側で

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

、私はこれを経由してのdivが表示されるように期待していた。

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

私はページが知っているだろうとは思わないしかし、それは、あまりにも問題になる可能性があります列挙型？

Answer 1

これは実際に動作します。

：エラー 'pageMode' is undefinedだから

以下の例では

pageMode = ko.observable<PageMode>(); 

に

pageMode: KnockoutObservable<PageMode>; 

を変更pageModeがHomeViewModel

でインスタンス化されていないという事実に由来し、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>

Answer 2

ノックアウトバインディングは、ビューモデル、グローバル変数、およびバインディングコンテキストのプロパティのプロパティにアクセスできます。そのため、単純な解決策は、列挙型がグローバルに格納されていることを確認することです。

window.PageMode = PageMode;