剑道与价值的对立可见

Posted 2021-05-03

我相信我已经知道了这个问题的答案，但是在kendo中，如果observable中的值为null或false，你能否将DOM元素的可见性绑定到相反的位置？

例如：正常行为是显示一个<div>，其中包含用户需要操作的内容作为“步骤”的一部分。我想给用户提供跳过此步骤的选项。为此，我添加了一个“skip”复选框，在其中我将其值绑定到属性IsSkip：

<input id="checkbox-allow-skip" type="checkbox" data-bind="value: IsSkip" />

然后，我可以将<div>的可见性绑定到IsSkip的相反位置（数据绑定的伪代码）：

<div id="optional-step" data-bind="visible: !IsSkip">
  <!-- ... -->
</div>

编辑 - 我相信可能值得注意的是，目前我正在生成复选框的onchange事件，并将名为CannotSkip的新属性的值设置为与IsSkip相反并将可见性绑定到CannotSkip。

答案

您可能已经知道，由于绑定的构造方式，您无法根据伪代码反转绑定表达式中的属性值。然而，出现在绑定表达式中的visible引用不是对DOM属性的引用，它实际上是对具有对应的kendo binder的引用，invisible binder为您反转值。因此，对您的问题最简单的解决方案就是这样：

<div id="optional-step" data-bind="invisible: IsSkip">
  <!-- ... -->
</div>

但是，最终你肯定会遇到这样的情况：这不会解决你的问题，例如也许可见性取决于几个标志的状态？这种类型的场景最好通过绑定到函数来处理，而不是执行任何必要的逻辑。使用此方法时要记住的最重要的事情是使用可观察对象的get和set方法操纵视图模型的任何属性。这可确保在任何属性更改时刷新对函数的任何绑定;在剑道的说法，这被称为dependent method。您可以使用此方法解决您的问题，如下所示：

var viewModel = kendo.observable({
  IsSkip: false,
  CannotSkip: function() {
    return !this.get("IsSkip");
  }
});

<div id="optional-step" data-bind="visible: CannotSkip">
  <!-- ... -->
</div>