Question

让我先从当前行为的a screencast开始。正如您所看到的，当我为用户 jbrown 添加角色时，角色不会显示它应该在哪里！

但是，如果我导航到另一个用户，然后回到 jbrown ，角色会显示！

以下是相关的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角色必须填充，因为如您所见，当我离开并返回时，我可以看到我添加的角色。

我错过了什么？

Answer 1

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

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

你需要在＆＃34;角色＆＃34;之后删除一组括号。所以它看起来像：

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

Answer 2

而不是

self.selectedUser().roles().push(

DO

self.selectedUser().roles.push(

那将使用ObservableArray成员函数push而不是底层数组push。不同之处在于Knockout只注意到通过其成员函数所做的更改。

没有观察到Knockout Observable数组？

2 个答案: