Knockout禁用选择选项标题

Question

使用knockout 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来在一个地方完成它,但我遇到了困难.到目前为止,这是我的bindingHandler:

ko.bindingHandlers.disableOptionsCaption = {
    init: function (element) {

        ko.applyBindingsToNode(element, {
            optionsAfterRender: function (option, item) {

                ko.applyBindingsToNode(option, {
                    disable: !item
                }, item);

            }
        });

    }
};

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

Answer 1

您应该将所有绑定应用于一起,而不是一步一步地应用,如下所示:

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

            }
        });
    }
};