Mam aplikację quiz / ankietę i mam problemy z zapełnieniem listy rozwijanej za pomocą knockoutów.

Sprawdź to skrzypce w Firefoksie (lub Chrome), a następnie spróbuj z Internet Explorer 9 (lub IE8 lub IE7 ... knockout mówi, że jest kompatybilny z IE6 +, ale oczywiście IE daje pewne problemy w moim scenariuszu).

W Firefoksie i Chromemój przykład jsfiddle działa, ale nie z Internet Explorerem. Zobacz w thab 1, ostatnie pytanie „Gdzie mieszkasz?” oraz w zakładce 2 „Ulubiony sport?”. Lista rozwijana nie jest wypełniona w IE.

Podejrzewam, że coś nie działa dobrze z $ parent lub $ parent.ParticipantAnswer == null nie jest zrozumiałe przez IE. Próbowałem debugować, ale oczywiście nie znalazłem przyczyny, więc oto jestem.

Zarówno w tab1, jak i tab2 opcje nie są wypełniane, więc tutaj kod, pod którym nazywa się te 2 szablony:

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

A tutaj 2 szablony:

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

Myślałem, że szablon bez kontenera spowoduje problemy, aleto jsfiddle działa na Firefox i IE.

Naprawdę nie mam pojęcia, dlaczego to nie działa z IE, proszę o poprawną poprawkę i może wyjaśnienie przyczyny, więc wszyscy możemy się z niej uczyć;) Dziękuję.