javascript - Knockout Observable 数组没有被观察到？

Question

让我从 a screencast 开始当前的行为。正如您所看到的，当我为用户jbrown添加 Angular 色时，该 Angular 色没有显示在它应该显示的位置!

但是如果我导航到另一个用户，然后返回到 jbrown， Angular 色就会显示!

这是有问题的 ViewModel:

function UsersViewModel() {
  var self = this;
  // data with some removed for brevity
  self.isLoaded = ko.observable(false);
  self.selectedUser = ko.observable();
  self.SelectedUserHasRoles = ko.computed(function () {
    if (self.isLoaded()) {
      return self.selectedUser().roles().length > 0;
    }
    return false;
  });

  self.UserHasAllAvailableRoles = ko.computed(function () {
    if (self.isLoaded()) {
      return self.userAvailableRoles().length === 0;
    }
    return false;
  });

  // isLoaded gets set to true when AJAX call to server
  // is a success and data is returned

  // operations with some removed for brevity
  self.setCurrentUser = function (user) {
    const newRolesArray = self.roles().filter(function (role) {
      return !contains(user.roles(), role);
    });
    self.userAvailableRoles(newRolesArray);
    self.selectedUser(user);
  }

  self.addUser = function () {
    self.users.push(new User({ Username: this.newUsernameText() }));
    self.newUsernameText('');
    self.NewUserFormIsVisible(false);
    self.AddRolesFormIsVisible(true);
    self.setCurrentUser(self.users()[self.users().length - 1]);
  };

  self.addRoleForSelectedUser = function() {
    self.selectedUser().roles().push(new Role({ Name: self.selectedRole().name() }));
    self.AddRolesFormIsVisible(false);
    $.post('http://localhost:23926/admin/acl/addusertorole', { username: self.selectedUser().name(), role: self.selectedRole().name() },
    function () {
      console.log('user role created at db!');
    },
    'json');
  }
}

这里是有问题的 HTML 标记:

<!-- ko if: isLoaded -->
  <!-- ko if: SelectedUserHasRoles() -->
  <div class="roles-wrapper" data-bind="foreach: $root.selectedUser().roles()">
    <div class="role-token" data-bind="text: name()"></div>
  </div>
  <!-- /ko -->
<!-- /ko -->

我的 Observable Angular 色数组必须已填充，因为正如您所见，当我离开和返回时，我可以看到我添加的 Angular 色。

我错过了什么？

Answer 1

您正在尝试将新 Angular 色推送到底层、未跟踪的数组，而不是可观察数组。

self.addRoleForSelectedUser = function() {
    self.selectedUser().roles().push(new Role({ Name: self.selectedRole().name() }));
    ...
}

您只需删除“Angular 色”后面的括号，使其看起来像:

self.selectedUser().roles.push(new Role({ Name: self.selectedRole().name() }));