如何基于单选按钮选择状态使用Knockout虚拟元素if绑定？

我尝试用Knockout的虚拟元素配合if语句，根据两个单选按钮的选中状态显示指定区块，但observable始终未被正确赋值（一直为空），导致虚拟元素失效，内部内容持续显示。因为需要将元素从DOM中完全卸载，visible和hidden绑定无法满足需求（它们仅控制元素的显示/隐藏）。

代码示例 #

HTML代码 #

<table style="width:100%" class="table table-striped table-condensed">
<input type="radio" name="aSelect" value="value1" data-bind="checked: aType"/> value1
<input type="radio" name="aSelect" value="value2" data-bind="checked: aType"/> value2
</table>

<!-- ko if: aType() == "value1"-->
    <div> THIS SHOULD ONLY SHOW IF VALUE1 RADIO SELECTED</div>
<!-- /ko -->

JavaScript代码 #

function BindingViewModel() {
        var self = this;
        self.aType = ko.observable("value1");
}
$(function () {
    ko.validation.init();
    ko.applyBindings(new BindingViewModel());
});

排查与解决过程 #

• 编辑1：移除ko.validation.init()并将applyBindings移到$(function(){})外后，虚拟元素可正常工作一次，但再次点击单选按钮时无法更新。使用版本为Knockout 3.4.0和knockout.validation 2.0.3。
• 编辑2：移除table标签后，若applyBindings在$(function(){})外，虚拟元素可正常工作。
• 编辑3：应用解决方案后问题解决：需在虚拟元素内添加<tr>和<td>标签。
• 编辑4：根据场景不同，使用<tbody>标签也可解决问题。

内容的提问来源于stack exchange，提问作者zwhu