KnockOutJS条件注释在HTML中添加空格

Question

我有这个问题，但我并非100％确定与KnockOutJS有关。在网格中，行内的某些按钮是可选的，并且根据绑定项的值显示。我使用条件绑定来显示一些按钮或其他，但显然，即使它们没有显示，仍然会以某种方式创建一个空间：

如您所见，这两个按钮之间会出现一个神奇的空间。

这是我编写的那3列的模板代码：

<td>
    <a href="#" class="editDetails">Edit</a>
    <a href="#" class="viewDetails">View</a>
</td>
<td>
    <!-- ko if: (CanEdit()) -->
        <a href="#" class="editPremium">Edit</a>
    <!-- /ko -->
    <!-- ko if: (!CanEdit()) -->
        <a href="#" class="createCopy">Copy</a>
    <!-- /ko -->
    <a href="#" class="viewPremiums">View</a>
</td>
<td>
    <a href="#" class="delete">Delete</a>
</td>

没有与这些类关联的CSS。

正如你所看到的，有一个没有显示的按钮，也许是其他两个之间的空间的罪魁祸首。这是Google Chrome针对有问题的TD生成的代码：

<td>
    <!-- ko if: (CanEdit()) -->
       <a href="#" class="editPremium" style="visibility: visible;">Edit</a>
    <!-- /ko -->
    <!-- ko if: (!CanEdit()) -->
    <!-- /ko -->
    <a href="#" class="viewPremiums">View</a>
</td>

因此未显示中间按钮（如预期），但在其他两个之间创建了额外的空间。

我如何在两个按钮之间骑行？

Answer 1

是否可以使用visible绑定？

<td>
    <a href="#" class="editPremium" data-bind="visible: CanEdit()">Edit</a>
    <a href="#" class="createCopy" data-bind="visible: !CanEdit()">Copy</a>
    <a href="#" class="viewPremiums">View</a>
</td>

或者，您可以尝试删除元素周围的大部分空间：

<td>
    <!-- ko if: (CanEdit()) --><a href="#" class="editPremium">Edit</a><!-- /ko -->
    <!-- ko if: (!CanEdit()) --><a href="#" class="createCopy">Copy</a><!-- /ko -->
    <a href="#" class="viewPremiums">View</a>
</td>

通常，如果使用块元素，则间距会更少。您可以使用div将每个a括起来，也可以将a设置为display:block;，然后添加float:left;以使它们水平对齐。