javascript - subview 模型修改不同的 subview 模型

Question

我的屏幕有一个主视图模型。它由 2 个 subview 模型组成。

其中一个负责注册部分。其中一个处理登录部分。其中一个负责处理菜单部分(如果经过身份验证，可以显示哪些菜单项，以及“欢迎“用户名”类型的内容)。

$(document).ready(function () {

    // Create the main View Model
    var vm = {
        loginVm: new LoginViewModel(),
        registerVm: new RegisterViewModel(),
        layoutVm: new LayoutViewModel()
    }

    // Get the Reference data
    var uri = '/api/Reference/GetTimezones';
    $.getJSON({ url: uri, contentType: "application/json" })
            .done(function (data) {
                vm.registerVm.Timezones(data);
            });

    // Bind.
    ko.applyBindings(vm);

});

一旦我的登录模型的“Login”方法完成，我想在菜单模型中设置“IsAthenticated”值以及一些其他用户信息。

因此，在我的登录模型中，我有一个 SignIn 方法。

$.post({ url: uri, contentType: "application/json" }, logindata)
    .done(function (data) {
        toastr[data.StatusText](data.DisplayMessage, data.Heading);
        if (data.StatusText == 'success') {
            alert($parent.layoutVm.IsAuthenticated());
        }
        else {
        }
    })
    .fail(function () {
        toastr['error']("An unexpected error has occured and has been logged. Sorry about tbis! We'll resolve it as soon as possible.", "Error");
    });

警报代码是我的测试。我希望访问(并设置)layoutVm 模型的 IsAuthenticated 属性。这是我的主视图模型上的子模型之一。

但是，“$parent”未定义。

如何从我的登录Vm 更新layoutVm 中的值？

Answer 1

$parent 是 binding context 的一部分，仅在数据绑定(bind)评估期间可用(即绑定(bind)处理程序)。

在您的 View 模型结构中，您必须自己想出一种在模型之间进行通信的方法。例如，通过传递父 View 模型，或传递共享的可观察量。您描述的问题可以通过使用 data-bind="visible: $root.userVM.IsAuthenticated" 来解决，就像我在上一个问题中回答的那样。

如果您想采用其他方法，这里有一个关于如何在 View 模型之间共享可观察对象的示例。

var ChildViewModel = function(sharedObs) {
  this.myObs = sharedObs;
  this.setObs = function() {
    this.myObs(!this.myObs());
  }.bind(this);
}

var RootViewModel = function() {
  this.myObs = ko.observable(false);

  this.vm1 = new ChildViewModel(this.myObs);
  this.vm2 = new ChildViewModel(this.myObs);
  this.vm3 = new ChildViewModel(this.myObs);
}

ko.applyBindings(new RootViewModel());

div { width: 25%; display: inline-block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="with: vm1">
  <h4>vm1</h4>
  <p data-bind="text: myObs"></p>
  <button data-bind="click: setObs">
    flip
  </button>
</div>
<div data-bind="with: vm2">
  <h4>vm2</h4>
  <p data-bind="text: myObs"></p>
  <button data-bind="click: setObs">
    flip
  </button>
</div>
<div data-bind="with: vm3">
  <h4>vm3</h4>
  <p data-bind="text: myObs"></p>
  <button data-bind="click: setObs">
    flip
  </button>
</div>

请注意，每个 subview 模型也具有写入权限，因此您必须小心，不要意外更新可观察对象