if binding inside foreach

[rebulanyum]

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.

[Michael Best]

Some browsers (IE8?) ignore comments within select tags.

-- Michael

[rebulanyum]

I believe the problem is about using if and foreach binding inside
SELECT and OPTION tags. And I'm using IE 7 + Knockout v2.0 though.

> > "<!-- ko if: false -->" it is binding.- Alıntıyı gizle -
>
> - Alıntıyı göster -

[rebulanyum]

I'm truly sorry Michael: I've tried the code in Chrome and it's
working fine. So some features of KnockoutJS doesn't have cross
browser compability then.

I've used KO comments inside view because KnockoutJS doesn't let me to
use both "foreach" and "if" bindings on single Dom element: for
example
<select data-bind="if: false, foreach: groups">

<optgroup data-bind="attr: {label: label}, foreach: children">
<option data-bind="text: label"></option>
</optgroup>

<option data-bind="ifnot: false, text: label"></option>
</select>

this code gives me an error stating that using if and foreach binding
together is disallowed. So I cannot do such thing in IE7 or IE8? ...
Too bad.
I'll try to do the same with jQuery.tmpl then.

On 28 Mart, 12:47, Michael Best <mb...@dasya.com> wrote:

[Michael Best]

Yeah, probably your best bet.

[izzet izzet]

Hello again;

 

I've added optGroup binding feature to KnockoutJS version 2.0.0 . I'm using it and had no problem with both the old way and the new way of usages:

 

So, in order to bind the optgroup elements inside select, just use the following code (it's a sample):

 

<select data-bind="options: languageOptions, value: selectedOption, optionsValue: 'value', optionsText: 'text', optionsCaption: optionsText, optionsGroup: 'group'"></select>

You can find the code as an attachment.

[Derek Pinkerton]

I've run into this same issue. IE < 10 all seem to have this issue with virtual elements inside a select element. I'm wondering if anyone has implemented something like this optGroup binding as a separate custom binding. The sample attached by Izzet directly modifies the knockout 2.0.0 source code. I'd rather not be locked in to the knockout version.