Опция не отключена, когда я использую optionsCaption

Question

Я пытаюсь отключить опции в combobox с knockout.js. В knockout documentation есть один пример:

<select data-bind=" options: myItems, optionsText: 'name', optionsValue: 'id',
optionsAfterRender: setOptionDisable"> </select>

var vm = { myItems: [{ name: 'Item 1', id: 1, disable: ko.observable(false) }, { name: 'Item 3', id: 3, disable: ko.observable(true) }, { name: 'Item 4', id: 4, disable: ko.observable(false) }], setOptionDisable: function(option, item) { ko.applyBindingsToNode(option, { disable: item.disable }, item); } }; ko.applyBindings(vm);

Он хорошо работает. Here - это JSFiddle.

Но когда я добавляю optionsCaption, привязки не работают, и только заголовок отображается в поле со списком. Here - это скрипт JS с заголовками.

Что происходит?

Answer 1

Когда нокаут вставляет надпись, он использует значение undefined для опции, отображающей подпись.

Это означает, что в вашем после рендеринга вы получите первый элемент как undefined. Поскольку вы не можете применить привязку данных disable: undefined.disable, это вызовет ошибку.

Вам нужна дополнительная проверка для предотвращения нокаута от попыток привязать к undefined сек disable собственности:

setOptionDisable: function(option, item) { 
    if (!item) return; 
    ko.applyBindingsToNode(option, { 
    disable: item.disable 
    }, item); 
}