SELECT内的无模板的模板，foreach OPTION不适用于Internet Explorer [英] knockoutjs container 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.

请在Firefox(或Chrome)上检查该小提琴，然后在Internet Explorer 9(或IE8或IE7 ...上进行尝试...敲除表明与IE6 +兼容，但显然IE在我的方案中存在一些问题).

Please check this fiddle with Firefox (or Chrome), then try it with Internet Explorer 9 (or IE8, or IE7... knockout says to be compatible from IE6+ but obviously IE gives some problems in my scenario).

在Firefox和Chrome中， 我的jsfiddle示例 有效，但不适用于IE浏览器.在第1题中看到最后一个问题:你住在哪里?"然后在标签2中，最喜欢的运动?".下拉列表未在IE中填充.

In Firefox and Chrome my jsfiddle example works , but not with Internet Explorer. See in thab 1, last question "Where do you live?" and in tab 2, "Favorite sport?". The dropdown is not populated in IE.

我怀疑$ parent或$ parent.ParticipantAnswer == null无法被IE理解.我尝试调试，但显然找不到原因，所以我在这里.

I suspect that something is not working well with $parent, or $parent.ParticipantAnswer == null is not understood by IE. I tried to debug but obviously didn't find the cause, so here I am.

在tab1和tab2中，选项均未填充，因此在这里，这两个模板的代码称为:

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

这里是2个模板:

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

我本来以为没有容器的模板会产生问题，但是此jsfiddle 在两种Firefox上均可使用和IE.

I was thinking that a container less template would create problems, but this jsfiddle works on both Firefox and IE.

我真的不知道为什么它不能与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.

推荐答案

通常，无容器绑定在Internet Explorer中可以正常工作.但是，在某些情况下，例如select元素内部，IE(至少在10之前)会删除注释.

In general, containerless bindings work fine in Internet Explorer. However, IE (at least before 10) strips comments in certain scenarios like inside of select elements.

因此，KO从不看评论，也没有机会对其进行处理.最好的选择之一是使用repeat绑定: https://github.com/mbest/knockout -重复.基本上，这将使您可以通过附加到要重复的元素而不是容器来执行foreach.

So, KO never sees the comments or has a chance to process them. One of your best bets is to use the repeat binding: https://github.com/mbest/knockout-repeat. This will basically let you do a foreach by attaching to the element to be repeated rather than a container.

这篇关于SELECT内的无模板的模板，foreach OPTION不适用于Internet Explorer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！