data-binding - Knockout if, click and visible binding

Question

很简单的问题。

假设我的 view() 中有这个 HTML:

<a id="btnXYZ" class="" data-bind="click: editAction">Button</a>

将执行 editAction 的简单 anchor 标记如果点击。

现在，如果我有这样的事情:

<a id="btnXYZ" class="" data-bind="click: editAction, if: isOwner(ref)">Button</a>

比方说 isOwner(ref)评估为真，我看到没有文字的 anchor 。不好。

预期结果将与以前相同(第一个示例)。

现在让我们说我有这样的事情:

<div class="">
    <a id="btnX" class="" data-bind="click: editAction, if: isOwner(ref)">Button</a>
    <a id="btnY" class="" data-bind="click: editAction, if: isOwner(ref)">Button</a>
    <a id="btnZ" class="" data-bind="click: editAction, if: isOwner(ref)">Button</a>
</div>

和以前一样，如果 isOwner(ref) 计算结果为 true，请查看空 anchor 标记。

问题:
如何绑定(bind) if: isOwner()管理按钮可见性？

IE。
如果 isOwner(ref)评估为 true我应该看到一个正确的链接/按钮
如果 isOwner(ref)计算结果为 false我应该根本看不到链接/按钮

Answer 1

您可以使用virtual elements实现这一目标:

<!-- ko if: isOwner(ref) -->
    <a id="btnXYZ" class="" data-bind="click: editAction">Button</a>
<!-- /ko -->

此外，如果您愿意，您可以显示完全不同的内容，例如:

<!-- ko ifnot: isOwner(ref) -->
    whatever you want
<!-- /ko -->