假设我有以下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
变为false时,thing #3
被隐藏(内容被删除),但是包含(第三个)span
仍然留在DOM中,结果thing #2
没有圆角。
可以通过使用无容器绑定(<!-- ko if: showThing3 -->
)来解决此问题,但我想避免使用无容器绑定,因为注释被管道剥离了,我无法控制。
也许可以调整CSS规则以仅考虑可见的子元素(例如,我可以使用css
绑定在隐藏元素上添加hidden
类)。
是否有更优雅的解决方案,可以实际将涉及的span
从DOM中删除?