Knockout virtual elements not working with Internet Explorer

Question

If you run this script in Chrome, the selection box will be correctly populated with options A, B, and C. However, if you run it using Internet Explorer (version 8 or 9), this will not work. How can I fix this script so that it works with Internet Explorer, but still uses virtual elements?

http://jsfiddle.net/jeljeljel/2tUmP/

HTML

<script type="text/html" id="template"> <select id="type" name="type"> <option value="">-- Choose --</option> <!-- ko foreach: types --> <option data-bind="text: $data.desc, attr: { value: $data.id }"></option> <!-- /ko --> </select> </script> <div id="placeholder" data-bind="template: { name: 'template' }"></div> 

Javascript

 function Model(){ var self = this; self.types = ko.observable([]); } var model = new Model(); model.types().push({id: 0, desc:'A'}); model.types().push({id: 1, desc:'B'}); model.types().push({id: 2, desc:'C'}); ko.applyBindings(model); 

Answer 1

This is probably a limitation of Internet Explorer.

Instead of a virtual element, use the options binding to populate the <select> element:

 <select id="type" name="type" data-bind="options: types, optionsText: 'desc', optionsValue: 'id', optionsCaption: '-- Choose --'"> </select> 

Documentation: http://knockoutjs.com/documentation/options-binding.html