0

我正在尝试创建一个顶部带有空白选项的选择下拉列表。它在 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 足以看到我想要完成的工作。如果需要，我会添加更多信息。谢谢杰森

4

2 回答 2

2

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

<!-- 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 -->

但更一般地说：

  • if'Blank'表示您应该考虑使用optionsCaption绑定参数的默认值。

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

    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" />

    这样，您最终将获得不依赖于虚拟元素的干净标记。

于 2013-10-16T16:01:54.277 回答
1

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

<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 绑定。

于 2013-10-17T08:13:32.050 回答