使用optionsCaption

Question

我尝试使用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 Fiddle with captionsOption。

发生了什么事？

Answer 1

当knockout插入标题时，它会使用值undefined作为显示标题的选项。

这意味着，在您的渲染后，您将获得第一个项目undefined。由于您无法应用数据绑定disable: undefined.disable，因此会引发错误。

您需要额外检查以防止淘汰赛试图绑定到undefined disable财产：

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