javascript - ko.computed 属性以确定可见性不起作用

Question

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

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

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

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

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

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 文本片段外，一切似乎都有效。我不知道为什么没有显示!我在我的计算属性中放置了断点，并且可以看到当我选择一个没有 Angular 色的用户时，表达式(在控制台窗口中)是错误的，我正在否定它，所以我应该看到那个文本片段!

我做错了什么？我创建了一个 screencast让事情更容易理解。

Answer 1

当你想否定绑定(bind)中的可观察值或计算值时，你必须显式调用它:

<!-- ko if: !SelectedUserHasRoles() -->

在 if 的情况下绑定(bind)，还有 ifnot对方:

<!-- ko ifnot: SelectedUserHasRoles -->

---

我认为理解为什么这是必要的是很有用的，因为我看到它经常发生。

您可以将数据绑定(bind)属性视为以逗号分隔的键值对字符串。 knockout wraps each of the values in a function ，它称之为 valueAccessor .

基本上，您将从:

 data-bind="if: SelectedUserHasRoles"

到

{ 
   "if": function() { return SelectedUserHasRoles }
}

SelectedUserHasRoles是一个可观察实例，其评估为真实。当您使用 ! 取反此值时, 它永远是 false .

var myObs = ko.observable("anything");

var valueAccessor =    function() { return  myObs; };
var valueAccessorNeg = function() { return !myObs; };

console.log(valueAccessor());    // Returns the observable
console.log(valueAccessorNeg()); // Always prints false

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

valueAccessor 函数被传递给 init绑定(bind)的方法。一般通过calling检索它，然后 unwrapped .因为unwrap实用程序不关心您是否将 observable 传递给它或普通值，您将在犯此错误时看不到任何错误。

var myObs = ko.observable(false);

var va1 = function() { return myObs; };
var va2 = function() { return !myObs; };
var va3 = function() { return !myObs(); };

console.log(ko.unwrap(va1()));    // false
console.log(ko.unwrap(va2()));    // always false
console.log(ko.unwrap(va3()));    // true

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

我希望引擎盖下的这个小窥视可以帮助您(以及犯了这个错误的其他人)能够确定 () 何时出现。将来需要。