KnockoutJS – select与optgroup和javascript对象的绑定值

我在这里找到了一个示例，使用KnockoutJS创建一个带有optgroups的选择列表。 这工作正常，但我想将下拉列表的值绑定到我自己的javascript对象，然后访问该对象的特定属性：

 function Group(label, children) { this.label = ko.observable(label); this.children = ko.observableArray(children); } function Option(label, property) { this.label = ko.observable(label); this.someOtherProperty = ko.observable(property); } var viewModel = { groups: ko.observableArray([ new Group("Group 1", [ new Option("Option 1", "A"), new Option("Option 2", "B"), new Option("Option 3", "C") ]), new Group("Group 2", [ new Option("Option 4", "D"), new Option("Option 5", "E"), new Option("Option 6", "F") ]) ]), selectedOption: ko.observable(), specialProperty: ko.computed(function(){ this.selectedOption().someOtherProperty(); }) }; ko.applyBindings(viewModel); 

Answer 1

这种情况的一个很好的选择是创建一个快速自定义绑定，让您的“手工制作”选项的行为与options绑定创建的options相同（将对象作为元数据附加）。 绑定可能看起来像：

 ko.bindingHandlers.option = { update: function(element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); ko.selectExtensions.writeValue(element, value); } }; 

您会像以下一样使用它：

此处示例： http ： //jsfiddle.net/rniemeyer/aCS7D/

Answer 2

此版本带有标题，如果您想要选择父项：