CODEWITHSUNDEEP
javascriptknockout.js
Etienne
Etienne

Reputation: 2287

Knockout: 2 nested foreach not working correctly in IE with the $data

I'm using Knockout.js 2.1.0 and jQuery 1.8.
I have 2 nested foreach, this working well in Chrome and Firefox, but not in IE (tested in 8 and 9).
In IE, the $data in the second nested foreach still corresponding to the parent foreach.

This is my view: 

<!-- ko foreach: dropdowns -->
    <select>
        <option data-bind="text: title, value: title"></option>
        <!-- ko foreach: values -->
            <option data-bind="text: $data, value: $data"></option>
        <!-- /ko -->
    </select>
<!-- /ko -->

And the JavaScript:​

var viewModel = {
    dropdowns: [
        {
            title: "Dropdown 1",
            values: ["value 1.1", "value 1.2", "value 1.3"]
        },
            {
            title: "Dropdown 2",
            values: ["value 2.1", "value 2.2", "value 2.3"]
        },
        {
            title: "Dropdown 3",
            values: ["value 3.1", "value 3.2", "value 3.3"]
        }
    ]
}

ko.applyBindings(viewModel);

I made a jsfiddle to test the issue: http://jsfiddle.net/2ebDt/

Is it a bug or I made something wrong?
Thanks,

Upvotes: 0

Views: 431

Answers (2)

Michael Best
Michael Best

Reputation: 16688

This is where my repeat binding is useful. Here is your example using repeat: http://jsfiddle.net/mbest/2ebDt/2/

Upvotes: 0

RP Niemeyer
RP Niemeyer

Reputation: 114792

IE strips comments inside select tags. For your scenario, you might want to consider using optionsCaption with the options binding. It would look like: http://jsfiddle.net/rniemeyer/2ebDt/1/

<!-- ko foreach: dropdowns -->
    <select data-bind="options: values, optionsCaption: title">
    </select>
<!-- /ko -->​

The only difference is that the caption does not have a value set to the title.

Upvotes: 1

Related Questions