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”绑定提供静态值 “”它具有约束力。

Answer 1

混合版本：选项和组只有Group有属性子元素，如果有属性组，如果没有属性子组，则选项

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

Answer 2

我用jquery.tmpl解决了这个问题：

<select multiple="multiple">
        {{each selectItems}}
            {{if items}}
                <optgroup label="${text}">
                {{each items}}
                    <option value="${value}">${text}</option>
                {{/each}}
                </optgroup>
            {{else}}
                <option value="${value}">${text}</option>
            {{/if}}
        {{/each}}
        </select>

我已经用KnockoutJS解决了这个问题：我已经添加了一个自定义功能。请参阅this链接。

在foreach中使用if绑定（KnockoutJS）

2 个答案: