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

问题描述

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

self.SelectedUserHasRoles = ko.computed(function () {如果(self.isLoaded()){返回 self.selectedUser().roles().length >0;}返回假；});

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

<!-- ko if: !SelectedUserHasRoles --><div><p>用户没有角色.</p>

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

<!--/ko --><!--/ko -->

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

<块引用>

如果来自 AJAX 调用的数据加载完毕(isLoaded 为真)，那么对于当前选择的用户，检查他/她是否有任何角色.如果是，则循环遍历它们并显示它们，如果不是，则显示一些文字，说明用户没有角色".>

似乎一切正常，除了显示 User has no Roles 文本片段.不知道为什么不显示！我将断点放入我的计算属性中，可以看到当我选择一个没有角色的用户时，表达式(在控制台窗口中)是假的，我正在否定它，所以我应该看到那个文本片段！

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

解决方案

因为你绑定的不是变量而是表达式，所以这里需要加括号:

//^^ 这里

查看以下代码片段

function CreateVM() {var self = this;this.isTrue = ko.observable(false);this.selectedUser = ko.observable();this.isLoaded = ko.observable();self.SelectedUserHasRoles = ko.computed(function () {如果(self.isLoaded()){返回 self.selectedUser().roles().length >0;}返回假；});}var vm = new CreateVM();ko.applyBindings(vm);var userWithRoles = { 角色:ko.observableArray([1,2]) };var userWithoutRoles = { 角色: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>用户没有角色.</p>

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

<!--/ko -->SelectedUserHasRoles:<span class="role-token" data-bind="text: SelectedUserHasRoles"></span>

查看user3297291 的回答了解更多信息详情.

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;
});

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:

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.'

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

See the following snippet

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 -->

See user3297291's answer for more details.

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