CODEWITHSUNDEEP
javascriptknockout.js
John Livermore
John Livermore

Reputation: 31333

Knockout virtual elements not working with Internet Explorer

If you run this Fiddle in Chrome, the select box is correctly filled with options A, B, and C. However, if you run it with Internet Explorer (version 8 or 9), it does not work. How can I fix this fiddle to make it work with Internet Explorer, but still use 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);

Upvotes: 4

Views: 853

Answers (1)

Michael Liu
Michael Liu

Reputation: 55499

This is probably a limitation of Internet Explorer.

Instead of a virtual element, use the options binding to populate a <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

Upvotes: 5

Related Questions