SELECT、foreach 选项中的 knockoutjs 无容器模板不适用于 Internet Explorer

我有一个测验/调查应用程序，但在使用 knockoutjs 填充下拉列表时遇到问题。

请用 Firefox（或 Chrome）检查这个小提琴，然后用 Internet Explorer 9（或 IE8、或 IE7...knockout 说与 IE6+ 兼容，但显然 IE 在我的场景中出现了一些问题）尝试。

在 Firefox 和 Chrome 中我的 jsfiddle 示例可以，但不适用于 Internet Explorer。请参阅第 1 章的最后一个问题“你住在哪里？”在选项卡 2 中，“最喜欢的运动？”。 IE 中未填充下拉列表。

我怀疑 $parent 的某些功能不能正常工作，或者 IE 无法理解 $parent.ParticipantAnswer == null 。我尝试调试但显然没有找到原因，所以我在这里。

在 tab1 和 tab2 中，选项均未填充，因此这里调用这两个模板的代码：

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

我真的不知道为什么它不适用于 IE，我在这里请求有效的修复，也许还需要解释原因，这样我们都可以从中学习；）谢谢。

一般来说，无容器绑定在 Internet Explorer 中运行良好。但是，IE（至少在 10 之前）会在某些情况下删除注释，例如在select元素。

因此，KO 永远不会看到这些评论，也没有机会处理它们。你最好的选择之一是使用repeat捆绑：https://github.com/mbest/knockout-repeat。这基本上会让你做一个foreach通过附加到要重复的元素而不是容器。