Reputation: 1343
I created an application with a topbar (HeaderViewModel) and a link on it that opens a modal with a login form (LoginViewModel).
The LoginViewModel assigned to the modal handles the login functionality:
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
}
...
}
After the login (ajax call) has succeeded the modal closes and the HeaderViewModel should be aware of the loggedIn state so the knockout if/else statement can handle the visibilities according the the users role.
#header (only attached to 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]);
});
How can I make this work?
Upvotes: 2
Views: 234
Reputation: 63840
There are two different approaches.
Don't call ko.applyBindings
twice. Instead, create one Root view model that composes the other two.
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>
You can then choose any javascript method of your liking to make sure the login
feature will share its knowledge, including:
$root.login
in the login div
and placing login code there;new
ing the LoginViewModel
with a parameter: a callback to notify the $root
and possibly other sub view models (like the Header
) of changed current user credentials;Use some kind of pub-sub mechanism. Options include:
The LoginViewModel
will publish login results, and any subscriber can respond accordingly.
Upvotes: 2