javascript - 对 Knockout js 选择框进行分类

Question

假设我有以下 knockoutjs 绑定

var optionsWithCategory = [
  "Category: Person", // Category option should be disabled, or non-selectable
  "Jason",
  "John",

  "Category: Department",
  "Human Resource",
  "Sales"
];

<div id="selectBox">
<select databind="options: optionsWithCategory"></select>
</div>

我可以采取哪些方法来添加disable="disable"到所有options文本值以Category:. 因此，Person实际上Department是不可选择的，但在选择框中充当分隔符。此外，该select框被动态添加到selectBoxdiv 元素中。

我想出的一种方法是：

$('#selectBox').bind('DOMNodeInserted', function (e) {
    if (e.target.text != undefined && e.target.text.indexOf(':') >= 0) {
        $(e.target).attr("disabled", "disabled");
    }
});

但是好像不太优雅，有没有其他方法？

Answer 1

我不确定有什么干净的方法可以做到这一点，因为它有点不常见

但是您可以编写与您编写的代码类似的代码，或者您也可以创建自己的绑定处理程序来执行此操作。我建议使用绑定处理程序，因为它将所有逻辑封装在一个地方。