Question

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

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

您有任何建议或我做错了吗？请注意，在这种情况下我不能使用jquery.tmpl.js，只能使用硬编码的SELECT / OPTION标签

Answer 1

我知道这是很久以前的问题，但是自从我在谷歌找到这个问题的同时自己寻找答案时，这是值得回答的。我想出了解决方案，所以我回到这里分享它。两年和“可见”仍然不起作用**，所以我检查“如果”绑定。在选项元素中对数据进行数据绑定使其隐藏但可选择。 Knockout还有一个叫做“无容器控制流语法”的东西。

这对我有用：

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

它有效，因为如果隐藏DOM。来自淘汰赛网站：

如果扮演与可见绑定类似的角色。不同的是可见，包含的标记始终保留在DOM中始终应用其数据绑定属性 - 仅可见绑定使用CSS来切换容器元素的可见性。 if绑定，但是，在DOM中物理添加或删除包含的标记，并且只有在表达式为真时才对后代应用绑定。

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

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

**“可见”适用于Chrome 27和Firefox 21，但不适用于Chrome中的多选。

也适用于IE 10和Chrome中的多选。

Answer 2

当您设置visible属性时，knockout只会向style="display: none"元素添加<option>属性。这在IE中无效。参见：

style.display='none' doesn't work on option tags in chrome, but it does in firefox

Answer 3

代码建议您使用select来选择页码。考虑创建一个包含选项的DependentObservable。

viewModel.Pages = ko.dependentObservable(function() {
  var pages = []
  for (var i=0 ; i < this.NumPages() ; ++i) {
    pages.push({label: "Pag " + (i+1), value: (i+1)})
  }
  return pages;
}, viewModel)

在视图中：

<select data-bind="value: Page, options: Pages, optionsText: 'label'></select>

选择第2页时，Page变量将包含{label：'Pag 2'，值：2}

knockoutjs：选项标签和可见性问题

3 个答案: