ko.computed属性来确定可见性不起作用 [英] ko.computed property to determine visibility not working

问题描述

在我的KncokoutJS ViewModel中，我具有以下计算所得的属性:

In my KncokoutJS ViewModel, I have the follow computed property:

self.SelectedUserHasRoles = ko.computed(function () {
  if (self.isLoaded()) {
    return self.selectedUser().roles().length > 0;
  }
  return false;
});

在我的HTML中，我有以下内容:

And in my HTML, I have the following:

<!-- ko if: isLoaded() -->
  <!-- ko if: !SelectedUserHasRoles -->
  <div>
    <p>User has no Roles.</p>
  </div>
  <!-- /ko -->
  <!-- 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 -->

在我的代码中，我是这样说的:

In my code, I was to say this:

如果AJAX调用中的数据已完成加载( isLoaded为true )，则对于当前选择的用户，检查并查看他/她是否有角色. 如果是，则遍历它们并显示它们，如果不是，则显示一些文字用户没有角色".

If data from AJAX call has finished loading (isLoaded is true), then for the currently selected user, check and see if he/she has any roles. If yes, then loop through them and show them, if not, show a bit of text saying 'User has no Roles.'

除了显示的User has no Roles文本片段外，所有其他方法似乎都可以使用.我不知道为什么没有显示！我将断点放入我的计算属性中，可以看到当我选择一个没有角色的用户时，该表达式(在控制台窗口中)为false，并且取反，所以我应该那个文本片段！

All seems to work, except for the showing User has no Roles text snippet. I've no idea why that isn't showing! I'm putting breakpoints into my computed property and can see that when I select a user with no roles, the expression (in console window) is false, and I'm negating that, so I should see that text snippet!

我做错了什么?我创建了一个截屏，以使事情更容易理解.

What am I doing wrong? I've created a screencast to make things easier to understand.

推荐答案

由于您不是绑定到变量而是绑定到表达式，因此需要在此处添加括号:

Because you are not binding to a variable but to an expression, you need to add parenthesis here:

<!-- ko if: !SelectedUserHasRoles() -->
                               //^^ here

请参见以下代码段

function CreateVM() {
    var self = this;
    this.isTrue = ko.observable(false);
    this.selectedUser = ko.observable();
    this.isLoaded = ko.observable();
    self.SelectedUserHasRoles = ko.computed(function () {
       if (self.isLoaded()) {
          return self.selectedUser().roles().length > 0;
       }
       return false;
    });
}

var vm = new CreateVM();
ko.applyBindings(vm);

var userWithRoles = { roles: ko.observableArray([1,2]) }; 
var userWithoutRoles = { roles: ko.observableArray([]) }; 
vm.selectedUser(userWithoutRoles);
vm.isLoaded(true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!-- ko if: isLoaded() -->
  <!-- ko if: !SelectedUserHasRoles() -->
  <div>
    <p>User has no Roles.</p>
  </div>
  <!-- /ko -->
  <!-- ko if: SelectedUserHasRoles -->
  <div class="roles-wrapper" data-bind="foreach: $root.selectedUser().roles()">
    <div class="role-token" data-bind="text: $data"></div>
  </div>
  <!-- /ko -->
  SelectedUserHasRoles: <span class="role-token" data-bind="text: SelectedUserHasRoles"></span>
<!-- /ko -->

有关更多信息，请参见 user3297291的答案详细信息.

See user3297291's answer for more details.

这篇关于ko.computed属性来确定可见性不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！