knockout.js - knockout.js if binding 是否可以用来移除元素？

Question

假设我有以下 HTML 片段:

<div class="group-of-things">
     <span>thing #1</span>
     <span>thing #2</span>
     <span data-bind="if: showThing3">thing #3</span>
</div>

现在假设我有一个 CSS 在 group-of-things 的最后一个子节点上圆角:

.group-of-things > *:last-child { border-radius: 0 5px 5px 0 }

问题是当showThing3变成假 - thing #3被隐藏(内容被删除)，但包含(第三)span保留在 DOM 中，因此 thing #2 不会得到圆角。

这可以通过使用无容器绑定(bind) ( <!-- ko if: showThing3 --> ) 来解决，但我想避免使用无容器绑定(bind)，因为注释被我无法控制的管道剥离。

也许可以调整 CSS 规则以仅考虑可见的子元素(例如，我可以使用 css 绑定(bind)在隐藏元素上添加 hidden 类)。

是否有更优雅的解决方案可以实际删除 span来自 DOM 的问题？

Answer 1

为什么不使用可观察的事物数组？

<div data-bind="foreach: things" class="group-of-things">
    <span data-bind="text: $data"></span>
</div>

<script>
    model.things = ko.observableArray(["thing #1", "thing #2", "thing #3"]);
    ... 
    model.things.remove( "thing #3" );