Modelo de contêiner menos knockoutjs dentro de SELECT, foreach OPTION não funciona com o Internet Explorer

Question

Aug 22, 2013, 04:44 PM

template-engine knockout.js internet-explorer

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.

leaveComments