css - 使用 KO "if"绑定(bind)时如何删除包含字段的边框？

Question

JSFiddle 在这里(顺便说一句，需要在移动设备上调试它以获得底部边框):

http://jsfiddle.net/npgrier/6p3WV/3/

更改 this.showOptions = ko.observable(true); 行以将 false 传递给可观察对象。元素从页面中移除，但底部边框仍然存在。当元素也从 DOM 中删除时，有没有办法确保删除此边框？

Answer 1

你的问题是，即使你将你的 observables 设置为 false，你的 data-role="fieldcontain" div 仍然保留在 DOM 中，因为 KO 只会删除它们的内容而不是 div 自己。

<div data-role="fieldcontain" data-bind="if: showOptions">
   ...
</div>
<div data-bind="if: showTextBox" data-role="fieldcontain">
   ...
</div>

因此这些 div 是您的“边界”。

一种解决方案是使用 if 绑定(bind)的无容器语法，并用 if 包装您的 div:

<!-- ko if: showTextBox -->
    <div data-bind="" data-role="fieldcontain">
        <input type="text" />
    </div>
<!-- /ko -->

因此，如果您现在将 showTextBox 设置为 false，KO 将删除整个 div，这样您的边框就会消失。