使用KO“if”绑定时如何删除fieldcontain边界？

Question

JSFiddle在这里（需要在移动设备上调试这个以获得btw的底部边框）：

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

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

Answer 1

您的问题是，即使您将observable设置为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绑定的容器更少的语法，并使用if包装div：

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

因此，如果您现在将showTextBox设置为false，KO将删除整个div，以便您的边界消失。