KnockoutJS - Значение привязки для выбора с помощью объектов optgroup и javascript

Я нашел пример здесь, чтобы создать список выбора с помощью optgroups с помощью KnockoutJS. Это отлично работает, но я хочу привязать значение раскрывающегося списка к моему собственному объекту javascript, а затем получить доступ к определенному свойству этого объекта:

<select data-bind="foreach: groups, value:selectedOption">
    <optgroup data-bind="attr: {label: label}, foreach: children">
        <option data-bind="text: label"></option>
    </optgroup>
</select>

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

Ответ 1

Хорошим выбором для этой ситуации является создание быстрой пользовательской привязки, которая позволяет вашим "ручным" параметрам вести себя так же, как опции, созданные привязкой options (прикрепляет объект как метаданные). Связывание может выглядеть так:

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

Вы бы использовали его как:

<select data-bind="foreach: groups, value: selectedOption">
    <optgroup data-bind="attr: {label: label}, foreach: children">
        <option data-bind="text: label, option: $data"></option>
    </optgroup>
</select>

Пример здесь: http://jsfiddle.net/rniemeyer/aCS7D/

Ответ 2

Эта версия с надписью и если вы хотите выбрать родительский элемент:

<select data-bind="value: selectedOption ">
    <option data-bind="value:'', text:'Select'"></option>
    <!-- ko foreach: groups -->
        <optgroup data-bind="attr:{label: label}">
            <option data-bind="value: $data, text:label"></option>
            <!-- ko foreach: children -->
                <option data-bind="value: $data, text:label"></option>
            <!-- /ko -->
        </optgroup>
    <!-- /ko -->
</select>