Question

这个jsfiddle http://jsfiddle.net/gauldivic/wLrhrno9/接近我想要的。它有optgroups，但我似乎无法弄清楚如何设置值

JS

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

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 = function() {
    this.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")
        ])
    ]);

    this.selectedOption = ko.observable();

    this.specialProperty = ko.computed(function(){
        var selected = this.selectedOption();
        return selected ? selected.someOtherProperty() : 'unknown';
    }, this);
};

ko.applyBindings(new ViewModel());

HTML

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

我知道这是设置所选选项的地方，但我似乎无法弄清楚如何让它工作。 this.selectedOption = ko.observable（）; 这也适用于同一页面上的多个选择吗？我将在数据库中使用它，我希望能够预先选择这些选项。

Answer 1

我可以使用它：http://jsfiddle.net/brianlmerritt/3m67L5h0/

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


<hr />

<div data-bind="text: specialProperty"></div>

我不知道第一个选项是什么 - 你可以通过取消注释将它重新放入。

请注意，选项值必须带括号，因为它是可观察的

viewModel的小改动

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

function Group(label, children) {
    this.label = ko.observable(label);
    this.children = ko.observableArray(children);
}

function Option(label, property) {
    this.label = ko.observable(label);
    this.value = ko.observable(property);
}

var ViewModel = function() {
    this.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")
        ])
    ]);

    this.selectedOption = ko.observable();

    this.specialProperty = ko.computed(function(){
        var selected = this.selectedOption();
        return selected ? selected : 'unknown';
    }, this);
};

ko.applyBindings(new ViewModel());

我将特殊的其他变量重命名为value，以便您可以看到它的设置位置。

最后，您不需要在specialProperty中调用.someOtherProperty（）或.value（），因为observable将始终设置为值。

使用optgroup knockoutjs设置选择值

1 个答案: