我創建了一個帶有一個頂欄（HeaderViewModel）和一個鏈接的應用程序，該應用程序使用登錄窗體（LoginViewModel）打開一個模式。在Knockoutjs中的ViewModels之間共享變量狀態

分配到模式的LoginViewModel處理登錄功能：

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

登錄（AJAX調用）後，已經成功的模式關閉，並且HeaderViewModel應該知道的loggedIn狀態，這樣的淘汰賽，如果/ else語句可以根據用戶角色處理可見性。

的#header（僅連接到HeaderViewModel）：

<!-- ko if: loggedIn --> //loggedIn not known in HeaderViewModel 
    <p>Visible for logged in users</p> 
<!-- /ko -->

app.js：

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

我怎樣才能使這項工作？

來源

2016-05-11 Sam

有兩種不同的方法。

1根視圖模型

不要叫ko.applyBindings兩次。相反，請創建一個構成其他兩個的根視圖模型。

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，並把登錄代碼有;
newLoginViewModel帶有參數：回調以通知$root和可能的其他子視圖模型（如Header）的改變的當前用戶證書;

2.發佈 - 訂閱

使用某種形式的發佈 - 訂閱機制。選項包括：

的LoginViewModel將公佈結果登錄，任何用戶可以做出相應的反應。

來源

2016-05-11 09:41:41 Jeroen

我嘗試了兩種解決方案，但選擇了Knockout-postbox，因爲它感覺非常容易使用。謝謝！ – Sam

在Knockoutjs中的ViewModels之間共享變量狀態

回答

1根視圖模型

2.發佈 - 訂閱

相關問題