如果绑定不起作用<select>，则挖空

Question

为什么这样做：

<!-- ko if: show -->
    <select data-bind="options: categories, optionsText: 'name', optionsCaption: 'Select', value: selected_category"></select>
<!-- /ko -->

这不会：

<select data-bind="if: show, options: categories, optionsText: 'name', optionsCaption: 'Select', value: selected_category"></select>

换句话说，为什么不能在带有"if"的数据绑定中使用布尔值？

Answer 1

可以改用visible绑定来隐藏所选内容。

至于你更大的问题，if绑定实际上物理地删除了与 if 绑定的元素的所有子 DOM，并将其存储在节点缓存中以供以后检索。这是为了防止这些元素中可能影响其他文档元素的任何进一步绑定。

例如，在下面的代码段中，如果您打开浏览器的元素检查器并反复按下切换按钮，您将看到浏览器注入并删除了span的内部文本。

var vm = {
  show: ko.observable(true),
  toggle: function() {
    this.show(!this.show());
  }
};
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<span data-bind='if:show'>Show Me</span>
<input type='button' data-bind='click: toggle' value='Toggle' />

根据 Knockout 的 if 绑定文档：

相应地，可以添加 if 块中的标记或 随着表达式更改的结果而动态删除。数据绑定 属性将应用于所包含标记的新副本 每当重新添加时。