Modelo de contêiner menos knockoutjs dentro de SELECT, foreach OPTION não funciona com o Internet Explorer
Eu tenho um aplicativo de questionário / pesquisa e estou tendo problemas para preencher uma lista suspensa usando knockoutjs.
Por favor, verifique este violino com o Firefox (ou Chrome), tente com o Internet Explorer 9 (ou IE8, ou IE7 ... knockout diz ser compatível a partir do IE6 + mas obviamente o IE dá alguns problemas no meu cenário).
No Firefox e no Chromemeu exemplo jsfiddle funciona, mas não com o Internet Explorer. Veja no cap. 1, última pergunta "Onde você mora?" e na aba 2, "Esporte favorito?" A lista suspensa não é preenchida no IE.
Eu suspeito que algo não está funcionando bem com $ parent, ou $ parent.ParticipantAnswer == null não é compreendido pelo IE. Eu tentei depurar, mas obviamente não encontrei a causa, então aqui estou eu.
Em ambas as tab1 e tab2, as opções não são preenchidas, então aqui o código onde esses dois modelos são chamados:
<!-- ko if: AnswerTypeId == 2 -->
<select data-bind="attr: { name: Id, id: 'answerq' + Id }">
<option value="0"></option>
<!-- ko template: { name: 'option-template', foreach: Answers } -->
<!-- /ko -->
</select>
<!-- /ko -->
<!-- ko if: AnswerTypeId == 6 -->
<select data-bind="attr: { name: Id, id: 'answerq' + Id }">
<option value="0"></option>
<!-- ko template: { name: 'location-template', foreach: Answers } -->
<!-- /ko -->
</select>
<!-- /ko -->
E aqui os 2 modelos:
<script type="text/html" id="option-template">
<!-- ko if: $parent.ParticipantAnswer != null && $parent.ParticipantAnswer.AnswerId == $data.Id -->
<option data-bind="text: Description, attr: { value: Id, selected: 'selected' }"></option>
<!-- /ko -->
<!-- ko if: ($parent.ParticipantAnswer == null || $parent.ParticipantAnswer.AnswerId != $data.Id) -->
<option data-bind="text: Description, attr: { value: Id }"></option>
<!-- /ko -->
</script>
<script type="text/html" id="location-template">
<!-- ko if: $parent.ParticipantAnswer != null && $parent.ParticipantAnswer.AnswerInt == $data.Id -->
<option data-bind="text: Description, attr: { value: Id, selected: 'selected' }"></option>
<!-- /ko -->
<!-- ko if: ($parent.ParticipantAnswer == null || $parent.ParticipantAnswer.AnswerInt != $data.Id) -->
<option data-bind="text: Description, attr: { value: Id }"></option>
<!-- /ko -->
</script>
Eu estava pensando que um modelo de contêiner a menos criaria problemas, maseste jsfiddle funciona no Firefox e no IE.
Eu realmente não tenho idéia porque não funciona com o IE, eu estou pedindo aqui uma correção válida e talvez uma explicação da causa, para que todos nós possamos aprender com isso;) Obrigado.