将 Knockout if binding 与 data binding 结合在一行中答案

【问题标题】：Combining Knockout if binding with data binding in one line将 Knockout if binding 与 data binding 结合在一行中
【发布时间】：2017-10-24 09:50:02
【问题描述】：

是否可以将 Knockout 的 if 绑定与同一行中的另一个绑定结合起来？如果条件为真，我只想显示和执行对 div 的绑定。只有当用户有权查看时，才应显示图表。

我的图表定义很简单：

<div style="height:150px" data-bind="dxChart: chartSettings"></div>

我可以在 dxChart 绑定之前添加 if 绑定吗？或者如果在这种上下文中绑定，是否不可避免地使用注释，像这样？

<!-- ko if: hasRights -->
<div style="height:150px" data-bind="dxChart: chartSettings"></div>
<!-- /ko -->

【问题讨论】：

几乎无法避免自己的自定义绑定将两者结合起来。您不能在使用 controlsDescendantBindings: true 的同一元素上拥有多个绑定
本质上是从 DOM 中添加/删除元素的任何绑定。 “if”绑定绝对属于该类别，从名称中我猜 dxChart 也是如此。正如 Nisarg 所建议的，“可见”绑定可能会起作用，因为它只会更改 css 以隐藏元素，但如果隐藏还不够，您将不得不使用包装元素或虚拟元素。
非常感谢您的解释！

标签： javascript knockout.js devextreme

【解决方案1】：

<div style="height:150px" data-bind="dxChart: chartSettings, if: hasRights">
    ... Elements ...
</div>

这不会影响 div 本身，只会影响 div 中包含的元素。

您可以使用 visible 绑定 - 这将隐藏整个 div（包括子项），但您可能知道，它不会阻止 div 被添加到 DOM：

<div style="height:150px" data-bind="dxChart: chartSettings, visible: hasRights">
    ... Elements ...
</div>

所以，是的，将 div 包装在基于注释的绑定 (containerless control flow syntax) 中是解决方案之一。另一种解决方案是包装一个具有if 绑定的div。类似的东西：

<div data-bind="if: hasRights">
    <div style="height:150px" data-bind="dxChart: chartSettings">
        ... Elements ...
    </div>
</div>

【讨论】：