1。根视图模型

Question

我创建了一个带有topbar（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调用）成功后，modal关闭，HeaderViewModel应该知道loggedIn状态，因此knockout 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]);
});

我该如何使这项工作？

Answer 1

有两种不同的方法。

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>

然后，您可以选择自己喜欢的任何javascript方法，以确保login功能分享其知识，包括：

在登录$root.login中调用div并在其中放置登录代码;
new LoginViewModel带有一个参数：一个回调，用于通知$root以及可能已更改的当前用户凭据的其他子视图模型（如Header）;

2。发布 - 订阅

使用某种pub-sub机制。选项包括：

LoginViewModel将发布登录结果，任何订阅者都可以做出相应的响应。

在Knockoutjs中的ViewModel之间共享变量状态

1 个答案:

1。根视图模型

2。发布 - 订阅