トップバー（HeaderViewModel）とその上に、ログインフォーム（LoginViewModel）でモーダルを開くリンクを持つアプリケーションを作成しました。モーダルが閉じ成功したログイン（AJAX呼び出し）後KnockoutjsのViewModels間で可変状態を共有する

var LoginViewModel = function() { 
    var self = this; 

    self.email = ko.observable(); 
    self.password = ko.observable(); 

    self.loggedIn = ko.observable(false); 

    self.login = function() { 
     // loggedIn true if ajax succeeded 
    } 
    ... 
}

とHeaderViewModelはノックアウトので、もしLOGGEDIN状態に注意する必要があります。モーダルに割り当てられ

LoginViewModelは、ログイン機能を処理します/ elseステートメントは、ユーザーの役割に従って可視性を処理できます。

＃ヘッダー（のみHeaderViewModelに添付）：

 //loggedIn not known in HeaderViewModel <p>Visible for logged in users</p> 

app.js：

$(function() { ko.applyBindings(new HeaderViewModel, $("#header")[0]); ko.applyBindings(new LoginViewModel, $("#login")[0]); });

どのように私はこの作業を行うことができますか？

出典

2016-05-11 Sam

2つの異なるアプローチがあります。

1.ルートビューモデル

二回ko.applyBindingsを呼び出さないでください。代わりに、他の2つを構成する1つのルートビューモデルを作成します。

function RootViewModel() { 
    this.headerViewModel = new HeaderViewModel(); 
    this.loginViewModel = new LoginViewModel(); 
} 

ko.applyBindings(new RootViewModel());

<body> 
    <div data-bind="with: headerViewModel"> 
    </div> 
    <div data-bind="with: loginViewModel"> 
    login dialog code here 
    </div> 
    etc. 
</body>

それから含めて、その知識を共有することを確認login機能を作るためにお好みの任意のjavascriptの方法を選択することができます。

ログインdivで$root.loginを呼び出し、そこログインコードを配置します;
newパラメータを使用して：$rootとおそらく他のサブビューモデル（Headerなど）に変更された現在のユーザー資格情報を通知するコールバック。

2.パブ・サブ

パブサブメカニズムのいくつかの種類を使用してください。オプションは次のとおりです。

knockout-postbox

LoginViewModel

Tiny PubSub

出典

2016-05-11 09:41:41 Jeroen

私は両方のソリューションを試しましたが、Knockout-postbox 1には非常に使いやすいと感じていました。ありがとう！ – Sam

KnockoutjsのViewModels間で可変状態を共有する

答えて

1.ルートビューモデル

2.パブ・サブ

関連する問題