Knockout.js Foreach而不是选项绑定。。。“我如何复制？”；选项标题“；功能？

本周我一直在与KnockoutJS合作，我有一个非常具体的问题，我希望在我之前有人遇到并解决了这个问题

本质上，我是在绑定一个选择框，但需要能够控制实际的选项标记本身（例如禁用），这意味着我无法使用“选项”绑定，这当然不会给您对选项标记的细粒度控制。。。以下是我的想法（它有效！）

我的问题是“optionsCaption”，因为我正在使用foreach方法生成内部选项。如果我能够使用敲除页面上更简单的“options”绑定，它不会自动工作。。。因此，如果我迭代的对象有一个空的“Label”值，它只会显示列表中的第一个值，而不是“Please Select…”，这是我理想的选择

有人知道怎么解决这个问题吗？我还没有发布我的视图模型代码，因为我不确定它是否真的相关，但如果需要的话，当然可以问一下

简而言之，问题是我需要使用foreach，这样我就可以在选项上设置css/attr绑定，但是仍然需要一个“unselected”选项

---

非常感谢您的帮助

标准选项绑定提供了对绑定进行后期处理的方法。为此，您需要使用

选项afterrender

您可以找到一个完整的示例，专门用于在上的

中禁用选项

引自该页：

如果需要在生成的选项元素上运行一些进一步的自定义逻辑，可以使用optionsAfterRender回调。每次向列表中插入选项元素时，都会调用回调函数，参数如下：

• 插入的选项元素
• 与之绑定的数据项，或标题元素的未定义数据项

---

您可以使用无容器

foreach

循环在固定的“请选择…”选项后生成选项：

请选择。。。

---

演示：

非常感谢。。看起来很简单！此选项的不幸之处在于IE8将从select中删除注释，这意味着如果使用注释语法，foreach将无法工作！唉，我试过了，但失败了！（我需要提供IE8支持）我明白了，IE8。。。这里有一个关于这个问题的讨论：[knockout.js:internetexplorer8中在select上使用无容器foreach失败]（），这可能会对您或其他人有所帮助。太棒了！谢谢你的帮助！真是一种享受@raheel_shan你确定你在作品中编辑的部分吗？由于item.disable实际上是可观察的，因此您应该需要

item.disable（）

或更好的

ko.unwrap（item.disable）

。可以确认。。。需要打开可观察到的。。。但除此之外。。。谢谢我敢肯定。看看我的答案。

<select data-bind="foreach: $root.availableLabels, value: Label, enable: !IsConfirmed(), optionsCaption: 'Please select...'">
    <option data-bind="text: Value, value: $data, css: { 'paired-label': IsPaired }, disable: IsPaired"></option>
</select>

<select size=3 data-bind="
    options: myItems,
    optionsText: 'name',
    optionsValue: 'id',
    optionsAfterRender: setOptionDisable">
</select>
 
<script type="text/javascript">
    var vm = {
        myItems: [
            { name: 'Item 1', id: 1, disable: ko.observable(false)},
            { name: 'Item 3', id: 3, disable: ko.observable(true)},
            { name: 'Item 4', id: 4, disable: ko.observable(false)}
        ],
        setOptionDisable: function(option, item) {
            ko.applyBindingsToNode(option, {disable: item.disable}, item);
        }
    };
    ko.applyBindings(vm);
</script>

self.setOptionDisable= function(option, item) {
    option.disabled = item.disable()
} 

<select data-bind="value: Label, enable: !IsConfirmed()">
    <option value="">Please select...</option>
    <!-- ko foreach: $root.availableLabels -->
    <option data-bind="text: Value, 
                       value: $data, 
                       css: { 'paired-label': IsPaired },
                       disable: IsPaired"></option>
    <!-- /ko -->
</select>