knockout.js - 在 foreach 中使用 if 绑定(bind)(KnockoutJS)

Question

我已经发布了我的 question去knockoutJS论坛。但我不确定我是否会在今晚之前得到帮助。所以我发布了同样的问题:这有点紧急；我在等你的建议:

风景:

<select data-bind="foreach: groups"> 
    <!-- ko if: false --> 
    <optgroup data-bind="attr: {label: label}, foreach: children"> 
        <option data-bind="text: label"></option> 
    </optgroup> 
    <!-- /ko --> 
    <!-- ko ifnot: false --> 
    <option data-bind="text: label"></option> 
    <!-- /ko --> 
</select>

JS:

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

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

var viewModel = { 
    groups: ko.observableArray([ 
        new Group("Option All", null), 
        new Group("Group 1", [ 
            new Option("Option 1"), 
            new Option("Option 2"), 
            new Option("Option 3") 
            ]), 
        new Group("Group 2", [ 
            new Option("Option 4"), 
            new Option("Option 5"), 
            new Option("Option 6") 
            ]), 
        new Group("Group 3", [ 
            new Option("Option 7"), 
            new Option("Option 8"), 
            new Option("Option 9") 
            ]) 
    ]) 

}; 


ko.applyBindings(viewModel); 

结果:

<select> 
    <optGroup>Option All</optGroup> 
    <option>Option All</option> 
    <optGroup label="Group 1"> 
        <option>Option 1</option> 
        <option>Option 2</option> 
        <option>Option 3</option> 
    </optGroup> 
    <option>Group 1</option> 
    <optGroup label="Group 2"> 
        <option>Option 4</option> 
        <option>Option 5</option> 
        <option>Option 6</option> 
    </optGroup> 
    <option>Group 2</option> 
    <optGroup label="Group 3"> 
        <option>Option 7</option> 
        <option>Option 8</option> 
        <option>Option 9</option> 
    </optGroup> 
    <option>Group 3</option> 
</select>

预期结果:

<select> 
    <option>Option All</option> 
    <optGroup label="Group 1"> 
        <option>Option 1</option> 
        <option>Option 2</option> 
        <option>Option 3</option> 
    </optGroup> 
    <optGroup label="Group 2"> 
        <option>Option 4</option> 
        <option>Option 5</option> 
        <option>Option 6</option> 
    </optGroup> 
    <optGroup label="Group 3"> 
        <option>Option 7</option> 
        <option>Option 8</option> 
        <option>Option 9</option> 
    </optGroup> 
</select>

因此，考虑到“结果”和“预期结果”之间的区别
我究竟做错了什么？即使我给“if”绑定(bind)提供静态值，比如
“<!-- ko if: false -->” 具有约束力。

Answer 1

混合版本:选项和组
只有 Group 有属性 children，如果有属性 - group，如果没有，则 Option

<select data-bind="foreach: groups">
<!-- ko if: $data.hasOwnProperty('children') -->
<optgroup data-bind="attr: {label: label}, foreach: children">
    <option data-bind="text: label"></option>
</optgroup>
<!-- /ko -->
<!-- ko ifnot: $data.hasOwnProperty('children')  -->
<option data-bind="text: label"></option>
<!-- /ko --></select>

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


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


var viewModel = {
groups: ko.observableArray([
    new Option("Option All"),
    new Group("Option All", [{"label": "Option without object"}]),
    {"label":"OptionGroup Test", "children":[{"label":"label_1"},{"label":"lebel_2"}]},
    new Group("Group 1", [
        new Option("Option 1"),
        new Option("Option 2"),
        new Option("Option 3")
        ]),
    new Option("Option only"),
    new Group("Group 2", [
        new Option("Option 4"),
        new Option("Option 5"),
        new Option("Option 6")
        ]),
    new Group("Group 3", [
        new Option("Option 7"),
        new Option("Option 8"),
        new Option("Option 9")
        ])
])};
ko.applyBindings(viewModel);