Tengo una aplicación de prueba / encuesta y tengo problemas para rellenar una lista desplegable con knockoutjs.

Por favor, compruebe este violín con Firefox (o Chrome), luego inténtelo con Internet Explorer 9 (o IE8, o IE7 ... El knockout dice que es compatible con IE6 + pero obviamente IE presenta algunos problemas en mi escenario).

En Firefox y Chromemi ejemplo jsfiddle Funciona, pero no con Internet Explorer. Ver en thab 1, última pregunta "¿Dónde vives?" y en la pestaña 2, "¿Deporte favorito?". El menú desplegable no se completa en IE.

Sospecho que algo no funciona bien con $ parent, o $ parent.ParticipantAnswer == null no se entiende por IE. Traté de depurar, pero obviamente no encontré la causa, así que aquí estoy.

Tanto en tab1 como en tab2, las opciones no se completan, por lo que aquí se llama el código donde se llaman estas 2 plantillas:

<!-- 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 -->

Y aquí las 2 plantillas:

<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>

Estaba pensando que un contenedor con menos plantilla crearía problemas, peroeste jsfiddle Funciona tanto en Firefox como en IE.

Realmente no tengo idea de por qué no funciona con IE, estoy solicitando una solución válida y quizás una explicación de la causa, para que todos podamos aprender de ella;) Gracias.