Using if binding inside foreach (KnockoutJS)

Question

I posted my question on the knockoutJS forum. But I'm not sure if I will get help until tonight. Therefore, I am posting the same question: and it is very urgent; I am waiting for your suggestions:

View:

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

Result:

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

Expected Result:

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

So, given the difference between Result and Expected Result, What am I doing wrong? Even I give static values ​​to the if-binding <!-- ko if: false --> "is required.

Answer 1

Version with a mixture: option and group Only a group has children, if there is a property - a group, if not, then 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); 

Answer 2

I solved the problem with 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> 

And I solved the problem with KnockoutJS: I added a special function to it. See this link.