Ich habe eine Quiz- / Umfrageanwendung und habe Probleme beim Ausfüllen einer Dropdown-Liste mit knockoutjs.

Bitte überprüfen Sie diese Geige mit Firefox (oder Chrome) und versuchen Sie es dann mit Internet Explorer 9 (oder IE8 oder IE7 ... Knockout sagt, dass es mit IE6 + kompatibel ist, aber IE gibt offensichtlich einige Probleme in meinem Szenario).

In Firefox und Chromemein jsfiddle beispiel funktioniert, aber nicht mit dem Internet Explorer. Siehe in Teil 1 die letzte Frage "Wo wohnst du?" und in Tab 2 "Lieblingssport?". Die Dropdown-Liste ist im IE nicht ausgefüllt.

Ich vermute, dass etwas mit $ parent oder $ parent nicht gut funktioniert. ParticipantAnswer == null wird vom IE nicht verstanden. Ich habe versucht zu debuggen, aber offensichtlich die Ursache nicht gefunden, also bin ich hier.

Sowohl in tab1 als auch in tab2 sind die Optionen nicht ausgefüllt. Hier also der Code, in dem diese beiden Vorlagen aufgerufen werden:

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

Und hier die 2 Vorlagen:

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

Ich dachte, dass ein Container weniger Vorlage Probleme verursachen würde, aberdiese Geige funktioniert sowohl mit Firefox als auch mit IE.

Ich habe wirklich keine Ahnung, warum es mit IE nicht funktioniert. Ich bitte hier um eine gültige Korrektur und möglicherweise eine Erklärung der Ursache, damit wir alle daraus lernen können. Vielen Dank.