Question

我相信我已经知道了答案，但是在kendo中，您是否可以将DOM元素的可见性与可观察的值是否为null或false相绑定？

例如：正常的行为是显示<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 。

Answer 1

您可能已经知道，由于绑定的构造方式，您无法根据伪代码反转绑定表达式中的属性值。但是，绑定表达式中出现的visible引用不是对DOM属性的引用，它实际上是对剑道活页夹的引用，该剑活页夹有一个对应的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>

剑道将价值与价值捆绑在一起

1 个答案: