将标题添加到列表

Question

我有一个带有费用清单的选择字段，每个费用都有ID，描述和状态 - 新旧。

<select id="feesSelect" data-bind="options: $root.fees(), optionsText: 'description', optionsValue: 'feesID', value: feeID(), optionsCaption: 'Choose Fee'"></select>

列表按状态排序。

如何根据状态标题option和一个new向列表中的old元素添加标题。

我需要我的列表看起来像这样：

• NEW --title
• test1 --option (fee description)
• test2 -option (fee description)
• OLD --title
• test3 --option (fee description)
• test4 --option (fee description)

我试过了 - 但它不起作用：

<select id="feesSelect" data-bind="foreach: $root.fees(), value: feeID()>
      <option data-bind="value: feesID, text: description, attr: {title: status}"></option>
</select>

Answer 1

您需要做的事情：

1. 将您的单位列表拆分为嵌套列表：groups -> fees
2. 遍历群组以制作<optgroup>元素
3. 转换费用以制作<option>元素

对于第2步和第3步，您可以this excelent answer R.P. Niemeyer 中所述定义快速自定义绑定

对于第1步，您需要循环查看费用列表并将其添加到群组中。例如：

const feeGroups = [
  { label: "new", fees: fees.filter(f => f.type === "old") },
  { label: "old", fees: fees.filter(f => f.type === "new") }
];

您可以在下面的代码段中查看一个有效的示例。

＆＃13;
＆＃13;
// From: https://stackoverflow.com/a/11190148/3297291
ko.bindingHandlers.option = {
  update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    ko.selectExtensions.writeValue(element, value);
  }
};

const fees = [
  { type: "old", description: "test1" },
  { type: "old", description: "test2" },
  { type: "new", description: "test3" },
  { type: "new", description: "test4" }
];

const feeGroups = [
  { label: "new", fees: fees.filter(f => f.type === "new") },
  { label: "old", fees: fees.filter(f => f.type === "old") }
];

ko.applyBindings({ feeGroups, selectedFee: ko.observable() });
  
＆＃13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select data-bind="foreach: feeGroups, value: selectedFee">
    <optgroup data-bind="attr: {label: label}, foreach: fees">
        <option data-bind="text: description, option: $data"></option>
    </optgroup>
</select>
＆＃13;
＆＃13;
＆＃13;