如果绑定不能与 <select> 一起使用，则淘汰赛答案

【问题标题】：knockout if binding doesn't work with <select>如果绑定不能与 <select> 一起使用，则淘汰赛
【发布时间】：2015-06-18 05:03:08
【问题描述】：

为什么会这样：

<!-- 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”显示布尔值？

【问题讨论】：

产生的错误总结了问题：多个绑定（如果和选项）试图控制相同元素的后代绑定。您不能在同一个元素上同时使用这些绑定。（我的重点）无容器语法有效，因为“ 和 cmets 充当开始/结束标记，定义一个包含标记的“虚拟元素”“，如if binding文档末尾附近所述。
Origineil：这并不完全正确，如果您在一个选择上只有一个 if 绑定，它仍然会呈现该选择。
"然而，if 绑定在物理上添加或删除 DOM 中包含的标记，并且仅在表达式为 true 时才将绑定应用于后代。" 如果我们假设 "包含”来表示子元素，那么它确实是这样设计的。
包含的标记 = 子元素，而不是元素本身。他们应该在文档中明确说明。
是的，我读了好几遍才明白这句话的意图。

标签： knockout.js

【解决方案1】：

您可以改用visible 绑定来隐藏选择。

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

例如，在下面的 sn-p 中，如果您打开浏览器的元素检查器并反复按下切换按钮，您将看到浏览器注入和删除 span 的 innerText。

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's if binding documentation:

相应地，标记 within 你的 if 块可以添加或随着表达式的变化而动态删除。数据绑定属性将应用于包含标记的新副本每次重新添加时。

【讨论】：

是的，visible 是一种解决方法，其结果是 <select> 仍在呈现。这是一种解决方法，但不是答案。