淘汰禁用选择选项标题

Knockout disable select option caption

本文关键字:选项 标题 选择 淘汰      更新时间:2023-09-26

淘汰2.3.0引入了optionsAfterRender绑定,因此可以非常灵活地更改选项。

我想禁用选项标题。目前我正在做

<select data-bind="options: items, optionsCaption:'please select', optionsAfterRender: function(option, item) { ko.applyBindingsToNode(option, {disable: !item}, item); }"></select>

这是有效的,但我必须在任何地方复制和粘贴optionsAfterRender函数。我一直在尝试创建一个自定义bindingHandler来在一个地方完成它,但我遇到了困难。到目前为止,这是我的绑定处理程序:

ko.bindingHandlers.disableOptionsCaption = {
    init: function (element) {
        ko.applyBindingsToNode(element, {
            optionsAfterRender: function (option, item) {
                ko.applyBindingsToNode(option, {
                    disable: !item
                }, item);
            }
        });
    }
};

我还在这里创建了一个小提琴,显示工作版本和非工作版本。任何帮助都将不胜感激!

您应该将所有绑定一起应用,而不是像这样一步一步地应用:

Html

<select data-bind="disableOptionsCaption:{}"></select>  

JS-

ko.bindingHandlers.disableOptionsCaption = {
    init: function (element,valueAccessor, allBindingsAccessor, viewModel) {
        ko.applyBindingsToNode(element, {
            options: viewModel.items,
            optionsCaption: 'please select',
            optionsAfterRender: function (option, item) {
                ko.applyBindingsToNode(option, {
                    disable: !item
                }, item);
            }
        });
    }
};