Thursday, 22 August 2013

knockoutjs conteiner less template inside SELECT, foreach OPTION not working with Internet Explorer

knockoutjs conteiner less template inside SELECT, foreach OPTION not
working with Internet Explorer

I have an quiz/survey application and I'm having problems populating a
dropdown list using knockoutjs.
Please check this fiddle with Firefox, then try it with Internet Explorer
9 (or IE8, or IE7... knockout says to be compatible from IE6+).
In Firefox my jsfiddle example works, but not with Internet Explorer.
I suspect that something is not working well with $parent, or
$parent.ParticipantAnswer == null is not understood by Internet Explorer.
I tried to debug but obviously didn't find the cause, so here I am.
In both tab1 and tab2, the options are not populated, so here the code
where these 2 templates are called:
<!-- 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 -->
And here the 2 templates:
<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>
I was thinking that a container less template would create problems, but
this jsfiddle works on both Firefox and IE.
I really have no idea why it doesn't work with IE, I'm asking here for a
valid fix and maybe an explanation of the cause, so we all can learn from
it ;) Thank you.

No comments:

Post a Comment