Question

我正在尝试在顶部创建一个带有空白选项的选择下拉列表。它在Chrome中运行良好，但在IE中却不行（使用IE 9）。这部分出了点问题：

<!-- ko 'if': $data === 'Blank' -->
<option data-bind="text: '', value: $data"></option>
<!-- /ko -->
<!-- ko 'if': $data !== 'Blank' -->        
<option data-bind="text: $data, value: $data"></option>                
<!-- /ko -->

http://jsfiddle.net/EYjyJ/2/

如何在IE中使用它，就像在Chrome中一样？希望jsFiddle足以看到我想要实现的目标。如果需要，我会添加更多信息。谢谢杰森

Answer 1

通常，vitual元素在不将绑定名称作为字符串传递的情况下工作。

<!-- ko if: $data === 'Blank' -->
<option data-bind="text: '', value: $data"></option>
<!-- /ko -->
<!-- ko if: $data !== 'Blank' -->        
<option data-bind="text: $data, value: $data"></option>                
<!-- /ko -->

但更普遍的是：

如果'Blank'表示默认值，则应考虑使用optionsCaption binding parameter。

如果没有，最好的方法是在视图模型中解决它，而不是在绑定中解决它。

function Option(text) {
    this.text = text;
    this.displayText = ko.computed(function () {
        return (this.text === 'Blank') ? '' : this.text;
    });
}

function ViewModel() {
    this.options = ko.utils.arrayMap(["Blank", "a", "b"], function (text) {
        return new Option(text);
    });
}

和

<option data-bind="text: displayText, value: text" />

这样你最终会得到一个不依赖于虚拟元素的干净标记。

Answer 2

最后，我选择了模板解决方案：

<select id="jq-my-id" data-bind="template: { name: aoiTemplate, foreach: aoiTypes },value: aoi">
</select>

模板：

<script type="text/html" id="group-aoi-template">
<optgroup data-bind="attr: {'label': $data}, foreach: getAoisFor($data)">        
    <option data-bind="text: $data.text, value: $data.code"></option>        
</optgroup>
</script>
<script type="text/html" id="blank-template">
    <option data-bind="text: '', value: $data.code"></option>
</script>

在我的视图模型中选择正确的模板：

self.aoiTemplate = function (aoiType) {
    return aoiType !== 'Blank' ? 'group-aoi-template' : 'blank-template';
};

由于optgroup，我无法使用optionsCaption绑定。

Knockout JS＆amp; IE功能

2 个答案: