knockout.js - knockout : issue with option tags and visibility

Question

似乎我们在两组浏览器之间对 html SELECT 标记的 OPTIONS 的可见性有不同的行为:
如果我在 OPTION 标记中将 visible 设置为 false，则相关的下拉列表项在 Chrome 和 Firefox 中隐藏，但在 IE8 和 Safari 中仍然可见。

http://jsfiddle.net/v8gyG/12/

你有什么建议还是我做错了什么？
请注意，在这种情况下我不能使用 jquery.tmpl.js，只能使用硬编码的 SELECT/OPTION 标签

Answer 1

我知道很久以前就有人问过这个问题，但值得回答，因为我在自己寻找答案时在 Google 中发现了这个问题。我想出了解决方案，所以我回来分享它。两年了，“可见”仍然不起作用**，所以我检查了“if”绑定(bind)。将其数据绑定(bind)在选项元素中使其隐藏但可选择。 Knockout 还有一种叫做“无容器控制流语法”的东西。

这对我有用:

   <!-- ko if: category.parent == 0 -->
     <option data-bind="value: category.name, text: category.name"></option>
   <!-- /ko -->

它之所以有效，是因为 if 隐藏了 DOM。来自 knockout 网站:

if plays a similar role to the visible binding. The difference is that, with visible, the contained markup always remains in the DOM and always has its data-bind attributes applied - the visible binding just uses CSS to toggle the container element’s visibility. The if binding, however, physically adds or removes the contained markup in your DOM, and only applies bindings to descendants if the expression is true.

您可以在文档中阅读更多内容: http://knockoutjs.com/documentation/if-binding.html

在此处查看各种选项: http://jsfiddle.net/v8gyG/24/

** “可见”适用于 Chrome 27 和 Firefox 21，但不适用于 Chrome 中的多选。
<!-- ko if: -->也适用于 IE 10 和 Chrome 中的多选。