我创建了一个带有顶部栏（HeaderViewModel）和一个链接的应用程序，该链接打开带有登录表单的模式（LoginViewModel）。
分配给模式的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应该知道loginIn状态，以便基因剔除if / 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]);
});
我该如何进行这项工作？
最佳答案
有两种不同的方法。
1.根视图模型
不要两次拨打ko.applyBindings。而是创建一个由其他两个组成的Root视图模型。
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>
然后，您可以选择自己喜欢的任何javascript方法来确保
login功能将共享其知识，包括：在登录名
$root.login中调用div并在其中放置登录代码；new使用参数LoginViewModel：回调，用于通知$root和可能的其他子视图模型（例如Header）当前用户凭据的更改；2. Pub-sub
使用某种pub-sub机制。选项包括：
Tiny PubSub
knockout-postbox
LoginViewModel将发布登录结果，任何订阅者都可以做出相应的响应。关于javascript - 在Knockoutjs中的ViewModel之间共享变量状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37158321/