knockout.js - Foreach 而不是选项绑定(bind)...如何复制 "optionsCaption"功能？

Question

本周我一直在使用 KnockoutJS，并且有一个非常具体的问题，我希望其他人在我之前遇到并解决了这个问题......

本质上，我正在绑定(bind)一个选择框，但需要能够控制实际的选项标签本身(例如禁用)，这意味着我无法使用“选项”绑定(bind)，这当然不会给你细粒度控制选项标签...这是我想出的(它有效!)

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

我的问题是“optionsCaption”，因为我正在使用 foreach 方法来生成内部选项，如果我能够使用在 knockout 页面上找到的更简单的“Options”绑定(bind)，它不会像它那样自动工作......所以如果我正在迭代的对象有一个空的“标签”值，它只会显示列表中的第一个，而不是“请选择...”，这是我最想要的。

有谁知道解决这个问题的方法？我没有发布我的 View 模型代码，因为我不确定它实际上是否相关，但如果需要当然可以询问!

简而言之，问题是我需要使用 foreach 以便我可以在选项上设置 css/attr 绑定(bind)，但仍然需要“未选择”选项。

非常感谢您的帮助!

Answer 1

您可以使用无容器 foreach在固定的“请选择...”选项之后循环生成选项:

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

演示: JSFiddle