Knockout.js IE9未在knockoutjs中使用optgroup正确创建选择框

Knockout.js IE9未在knockoutjs中使用optgroup正确创建选择框,knockout.js,Knockout.js,手动创建选择框时,IE9不起作用。在我看来,它不会抛出错误,也不会渲染任何东西 <select id="attributes" data-bind="value: value, valueAllowUnset: true" class="form-control"> <!-- ko foreach: groupedAttributes --> <optgroup data-bind=&q

手动创建选择框时,IE9不起作用。在我看来,它不会抛出错误,也不会渲染任何东西

<select id="attributes" data-bind="value: value, valueAllowUnset: true" class="form-control">
   <!-- ko  foreach: groupedAttributes -->
      <optgroup data-bind="attr : { label: name }" label="default">
        <!-- ko foreach: things -->
          <option data-bind="text: name, disabled:disabled, value: $data"></option>
        <!-- /ko -->
      </optgroup>
   <!-- /ko -->
</select>

JS
var vm = {
  value: ko.observable(),
  groupedAttributes : [
    {
      name: "thing 1",
      things : [ { name: "test1", disabled: false},{ name: "test2", disabled: false} ]
    }, 
    {
      name: "thing 2",
      things : [ { name: "test3", disabled: false}, { name: "test4", disabled: false} ]
    }
  ]
}; 
ko.applyBindings(vm);  

JS
var vm={
值:ko.observable(),
分组属性:[
{
名称:“事情1”,
事物:[{name:“test1”,disabled:false},{name:“test2”,disabled:false}]
}, 
{
名称:“事情2”,
事物:[{name:“test3”,disabled:false},{name:“test4”,disabled:false}]
}
]
}; 
ko.应用绑定(vm);
在Chrome和FF上工作


有什么想法吗?

我们可以通过避免使用无容器的条件语句来解决这个问题

修改视图:

<select id="attributes" data-bind="value: value, valueAllowUnset: true,foreach:groupedAttributes" class="form-control">
    <optgroup data-bind="attr : { label: name },foreach:things" label="default">
        <option data-bind="text:name,value: $data"></option>
    </optgroup>
</select>
<div data-bind="text: ko.toJSON(value)"></div>

工作时摆弄小提琴


PS:在IE 8+、Chrome、Firefox中测试。

IE9不允许
中除了
之外的任何其他子元素;这包括评论。IE9(也叫IE8)在Knockout能够评估任何绑定之前很久就删除了所有其他内容,所以当KO想要应用绑定时,注释已经消失了

您必须使用
选项
绑定,或者对
元素本身使用
foreach
绑定:

<select id="attributes" data-bind="value: value, valueAllowUnset: true,foreach:groupedAttributes" class="form-control">
    <optgroup data-bind="attr : { label: name },foreach:things" label="default">
        <option data-bind="text:name,value: $data"></option>
    </optgroup>
</select>
<div data-bind="text: ko.toJSON(value)"></div>

So相关问题(以及为什么首先使用无容器绑定)、占位符文本。正确的方法是在值未定义的地方添加默认选项。如果select标记包含foreach绑定,我想不出在组外添加默认选项的方法。请尝试接受答案,这对以后的其他人很有用。