CODEWITHSUNDEEP
knockout.js
rebulanyum
rebulanyum

Reputation: 527

using if binding inside foreach (KnockoutJS)

I've posted my question to knockoutJS forum. But I'm not sure if I will get help until tonight. So I'm posting the same question: and It's kind of urgent; I'm waiting for your suggestions:

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

The 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, considering the difference between "Result" and "Expected Result" what am I doing wrong? Even I give static values to "if" binding like "<!-- ko if: false -->" it is binding.

Upvotes: 4

Views: 3030

Answers (2)

Slawomir Szwan
Slawomir Szwan

Reputation: 21

Version with mix : Option and Group Only Group has property children, if has property - 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);

Upvotes: 2

rebulanyum
rebulanyum

Reputation: 527

I've 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've solved the problem with KnockoutJS: I've added a custom feature on it. See this link.

Upvotes: 0

Related Questions