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

Share variable state between ViewModels in Knockoutjs

本文关键字：共享变量 状态 之间 ViewModels Knockoutjs 中的      更新时间：2023-09-26

我创建了一个应用程序，它有一个顶栏（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应该知道loggedIn状态，因此knocking-if/else语句可以根据用户角色处理可见性。

#标头（仅附加到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打两次电话。相反，创建一个根视图模型来组合其他两个。

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功能将共享其知识，包括：

  • 在登录div中调用$root.login，并在那里放置登录码
  • new用参数通知LoginViewModel：回调以通知$root和可能的其他子视图模型（如Header）更改的当前用户凭证

2.Pub sub

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

  • 小型PubSub
  • 淘汰邮箱

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

相关文章：